Блог

Главная - Вопросы по программированию - Изменить разделители в Vue?

Изменить разделители в Vue?

#vue.js #vuejs2 #vue-component

#vue.js #vuejs2 #vue-компонент

Вопрос:

РЕДАКТИРОВАТЬ: я должен изменить разделители из-за механизма шаблонов на стороне сервера…Я уверен, что это очевидно, но просто для ясности.

У меня есть следующий пример, который я вставил в свой app…it рендерится, но разделители, похоже, не работают, так как заполнители не заменяются…чего мне не хватает?

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>

    const tweets = [
        {
            id: 1,
            name: 'James',
            handle: '@jokerjames',
            img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
            tweet: "If you don't succeed, dust yourself off and try again.",
            likes: 10,
        },
        {
            id: 2,
            name: 'Fatima',
            handle: '@fantasticfatima',
            img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
            tweet: 'Better late than never but never late is better.',
            likes: 12,
        },
        {
            id: 3,
            name: 'Xin',
            handle: '@xeroxin',
            img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
            tweet: 'Beauty in the struggle, ugliness in the success.',
            likes: 18,
        }
    ];

    Vue.component('activity-list', {
        template: `
            <div class="tweet">
              <div class="box">
                <article class="media">
                  <div class="media-left">
                    <figure class="image is-64x64">
                      <img :src="tweet.img" alt="Image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <div class="content">
                      <p>
                        <strong><%tweet.name%></strong> <small><%tweet.handle%></small>
                        <br>
                        <%tweet.tweet%>
                      </p>
                    </div>
                      <div class="level-left">
                        <a class="level-item">
                          <span class="icon is-small"><i class="fas fa-heart"></i></span>
                          <span class="likes"><%tweet.likes%></span>
                        </a>
                      </div>
                  </div>
                </article>
              </div>
            </div>
         `,
        props: {
            tweet: Object
        }
    });

    const app = new Vue({
        el: "#activity-stream",
        data: {
            tweets
        },
        delimiters: ['<%', '%>']
    });

</script>

Комментарии:

1. Вы можете избежать изменений разделителей, используя v-text="tweet.likes" , в качестве примера, и не используя текстовую интерполяцию.

2. Как насчет твита. твит? Не имеет одиночного родительского элемента?

3. Вы можете использовать <p v-text="tweet.tweet" для отображения текста внутри него.

4. это работает, но почему разделитель не работает?

5. Приведенный ниже ответ касается этого, но я просто не за использование текстовой интерполяции, когда я могу этого избежать.

Ответ №1:

Вам нужно установить delimiter внутри компонента, как это работает для component level. Вот рабочий фрагмент.

 const tweets = [{
    id: 1,
    name: 'James',
    handle: '@jokerjames',
    img: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
    tweet: "If you don't succeed, dust yourself off and try again.",
    likes: 10,
  },
  {
    id: 2,
    name: 'Fatima',
    handle: '@fantasticfatima',
    img: 'https://semantic-ui.com/images/avatar2/large/molly.png',
    tweet: 'Better late than never but never late is better.',
    likes: 12,
  },
  {
    id: 3,
    name: 'Xin',
    handle: '@xeroxin',
    img: 'https://semantic-ui.com/images/avatar2/large/elyse.png',
    tweet: 'Beauty in the struggle, ugliness in the success.',
    likes: 18,
  }
];

Vue.component('activity-list', {
  delimiters: ['<%', '%>'],
  template: `
            <div class="tweet">
              <div class="box">
                <article class="media">
                  <div class="media-left">
                    <figure class="image is-64x64">
                      <img :src="tweet.img" alt="Image">
                    </figure>
                  </div>
                  <div class="media-content">
                    <div class="content">
                      <p>
                        <strong><%tweet.name%></strong> <small><%tweet.handle%></small>
                        <br>
                        <%tweet.tweet%>
                      </p>
                    </div>
                      <div class="level-left">
                        <a class="level-item">
                          <span class="icon is-small"><i class="fas fa-heart"></i></span>
                          <span class="likes"><%tweet.likes%></span>
                        </a>
                      </div>
                  </div>
                </article>
              </div>
            </div>
         `,
  props: ['tweet'],
});

const app = new Vue({
  el: "#activity-stream",
  data: {
    tweets
  }
});  
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id='activity-stream'>
  <activity-list v-for='tweet in tweets' :key='tweet.id' :tweet='tweet' />
</div>

Ответ №2:

delimiters опция не глобальная, а опция на уровне компонентов, поэтому вам нужно применить ее на уровне компонентов, а не на уровне корневого экземпляра..