Выбрать опции не работают Vue JS

Question

Выбрать опции не работают Vue JS

1

В то время как, практикуя различные элементы, используя Vue, я застрял в этой точке. Когда я попытался создать компонент template option и попытался использовать его в select, он не работает.

Vue.component('todo-item', {
  
  props: ['todo'],
  template: '<option v-bind:value="todo.id">{{todo.text}}</option>'
})

var app = new Vue({
  el: '#app',
 todo : [],
  data: {
    message: 'Hello Vue!123',
    buttonText: 'Click Me',
    seen:true,
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  },
  methods:{
    buttonClick:() => {
      app.message="Button Clicked";
      app.seen=true;
    }
  }
})

table{
  width:50%;
  border: solid 2px;
}
td{
  border: solid 1px;
  text-align:center
}
ol{
    list-style-type : none;
}
select{
  width:30%
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id ="app">
  <p v-if="seen">{{message}}</p>
  <button v-on:click="buttonClick">
    {{buttonText}}
  </button>
  <br><br>
  <input v-model="message"></input>
  <br>
  <br>
<select>
   <todo-item v-for="grocery in groceryList" :todo="grocery">
</select>
  <todo-item v-for="grocery in groceryList" :todo="grocery">
    
</todo-item>

    <ul v-for="grocery in groceryList">
    <li>
      {{ grocery.text }}
    </li>
</ul>
</div>

Я пытался использовать его вне тега select а также любой другой html работающий нормально, как input.

Codepen Link

Дайте мне знать в разделе комментариев, если что-нибудь, что вы хотите, чтобы я сделал, чтобы объяснить мою проблему. Спасибо

satyam pathak 06 авг. 2018, в 09:32

Источник

Теги:

javascript

vue.js

2 ответа

1

Если вы хотите использовать тег select вам нужно использовать теги option внутри него.

В документе vue:

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

В вашем примере вы можете использовать его так:

<select v-model="selectedGrocery">
  <option v-bind:value="grocery.id" v-for="grocery in groceryList">
      {{grocery.text}}
  </option>
</select>

hurricane 06 авг. 2018, в 05:59

0

Я знал этот конкретный способ достижения этого, но я хочу, чтобы он использовался как компонент, и если это невозможно, это означает, что я не могу импортировать его как компонент? Если да, то выберите Опции нельзя использовать в модуле компонента.
Satyam Pathak 06 авг. 2018, в 08:03
0

@satyampathak select и option являются элементами на основе ОС. Таким образом, вы не можете изменить их структуру, вы можете просто изменить их CSS. Если вы хотите использовать опцию select в качестве компонента, вам нужно создать свой собственный компонент без их использования. Вот простой пример для автозаполнения codepen.io/robrogers3/full/WKjGZE
hurricane 06 авг. 2018, в 08:06

Ещё вопросы

Я знал этот конкретный способ достижения этого, но я хочу, чтобы он использовался как компонент, и если это невозможно, это означает, что я не могу импортировать его как компонент? Если да, то выберите Опции нельзя использовать в модуле компонента.
@satyampathak select и option являются элементами на основе ОС. Таким образом, вы не можете изменить их структуру, вы можете просто изменить их CSS. Если вы хотите использовать опцию select в качестве компонента, вам нужно создать свой собственный компонент без их использования. Вот простой пример для автозаполнения codepen.io/robrogers3/full/WKjGZE

Jacob Goh · Accepted Answer · 2018-08-06T06-04-00.000Z

Я думаю, что пошло не так, это не Vue или Javascript. Это как браузер обрабатывает недействительный HTML.

select должен содержать только option.

если вы делаете это в HTML (при условии, что Javascript не используется вообще)

<select>
   <todo-item></todo-item>
   <todo-item></todo-item>
   <todo-item></todo-item>
</select>

браузер удалит todo-item поскольку он недействителен. https://codepen.io/jacobgoh101/pen/pZZQRz

В вашем случае, к моменту инициализации Vue, браузер уже удалил недействительный HTML-код, который был для todo-item.

Вы можете избежать этого, поместив select в компонент, а также. demo: https://codepen.io/jacobgoh101/pen/WKKYGm

Vue.component('basic-select', {
  template:'
<select>
  <slot></slot>
</select>
'
});

и использовать его как

<basic-select>
   <todo-item v-for="(grocery,i) in groceryList" :key="i" :todo="grocery">
</basic-select>

Таким образом, функция Vue будет применяться без использования браузера.

Такая проблема возникает только при использовании Vue непосредственно в браузере без использования инструментов сборки и vue-loader. В типичном проекте, создаваемом vue-cli, весь html-шаблон является дескриптором внутри одного компонента Vue, и весь html будет скомпилирован Vue перед использованием браузером

Спасибо, здесь есть смысл. Некоторое время я думал об этом, но просто хотел подтвердить, не делаю ли я что-нибудь неправильно с синтаксисом vue, что мешает мне делать это. Спасибо