2

Изучая Vue, столкнулся с проблемой. В документации есть пример с нумерованным списком:

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
      id: 0,
      text: 'Овощи'
    }, {
      id: 1,
      text: 'Сыр'
    }, {
      id: 2,
      text: 'Что там ещё люди едят?'
    }]
  }
});
<div id="app-7">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </ol>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Вот как компилится этот пример

Но, когда я пытаюсь перерисовать все это дело под выпадающий список select, то этот список не заполняется никакими данными. Переделанный мною код:

// Определяем новый компонент под именем todo-item
Vue.component('todo-item', {
  props: ['todo'],
  template: '<option > {{ todo.text }}</option>'
});

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
      id: 0,
      text: 'Овощи'
    }, {
      id: 1,
      text: 'Сыр'
    }, {
      id: 2,
      text: 'Что там ещё люди едят?'
    }]
  }
});
<div id="app-7">
  <select>
    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


Прошу найти решение и дать некоторые пояснения к данной проблеме.

2

1 ответ 1

2

Согласно документации:

Некоторые HTML-элементы, такие как <ul>, <ol>, <table> и <select> имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как <li>, <tr> и <option> могут появляться только внутри других определённых элементов.

Простым языком, если вы захотите вывести в <select> допустим <div>, при рендеринге страницы, <div>-тег не отобразится внутри <select>, так как это противоречит спецификации.

В нашем случае, когда происходит рендеринг, в <select> пытается вставится <todo-item>, а <select> в спецификации никто не предупредил, что такой можно будет вставить, вот он и игнорирует все подобные элементы и ничего не выводит в <select>.

Однако при создании vue, это было учтено и как отмечено в документации:

Пользовательский компонент <blog-post-row>(в нашем случае <todo-item> - от автора) будет поднят выше(), так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибут is предоставляет решение этой проблемы:

Таким образом, выполняя наставления документации меняем внутри <select>...</select> вместо <todo-item ...> -> <option is="todo-item" ...> мы получаем на выходе вполне рабочий <select>.

Использованы следующие источники информации - Vue: Основы компонентов, Vue: Особенности парсинга DOM-шаблона

Решение задачи автора вопроса (c использованием атрибута is)

// Определяем новый компонент под именем todo-item
Vue.component('todo-item', {
  props: ['todo'],
  template: '<option :value="todo.text">{{ todo.text }}</option>'
});

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
      id: 0,
      text: 'Овощи'
    }, {
      id: 1,
      text: 'Сыр'
    }, {
      id: 2,
      text: 'Что там ещё люди едят?'
    }]
  }
});
<div id="app-7">
  <select>
    <option v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
      is="todo-item"
    ></option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Решение задачи автора вопроса (c использованием <template>)

// Определяем новый компонент под именем todo-item
Vue.component('todo-item', {
  props: ['todo'],
  template: '<option :value="todo.text"> {{ todo.text }}</option>'
});

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [{
      id: 0,
      text: 'Овощи'
    }, {
      id: 1,
      text: 'Сыр'
    }, {
      id: 2,
      text: 'Что там ещё люди едят?'
    }]
  }
})
<div id="app-7">
  <select>
    <template>
      <todo-item v-for="item in groceryList"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
    </template>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.