Vue.js 绑定动态模型

Question

我正在尝试从一组动态属性创建一系列 select 标签。

参考 Dynamic Select Options

上的文档

但是，在获取数据之前我不知道型号名称，所以我需要使用动态值创建 v-model 绑定。

有什么想法吗？

JSfiddle

上的代码

HTML

<div id="selectApp">

<div v-repeat="dynamicSelects">
    
    {{key}}

    <!--THIS WORKS: <select v-model="setReps1" options="setReps1"></select> -->
    <select v-model="{{key}}" options="{{key}}"></select>

</div>  


<pre>{{$data|json}}</pre>

JS

new Vue({

    el: document.querySelector("#selectApp"),

    data: {

        dynamicSelects: [
            {key: "setReps1"}
        ],

        setReps1: [
          
            { text: '0', value: '0' },
            { text: '1', value: '1' }
        
        ]

    }
});

*更新提琴手link*

Answer 1

所以我想出了一个办法，创建一个 select 组件。

Codepen

<script id="sselect-template" type="x-template">
  <select v-model="data.selected" options="data.items"></select>
</script>

<div id="app">
   <div v-repeat="lists">
       <sselect data="{{lists[$index]}}"></sselect> 
   </div>
</div>

Vue.js 绑定动态模型

Vue.js Binding Dynamic Models

vue.js

HTML

JS