如何在列表项上使用 v-model 来设置对象的值

Question

编辑：我刚刚注意到错误来自 vue 不支持的第一个 div 上的 v-model。但是，我仍然不知道如何解决这个问题。

我正在尝试生成文件列表。每个文件都可以选择一种材料。根据材料选择，厚度的选择应该改变，选择也应该保存到我的对象中。

我目前得到了这个工作，但我从 vue 收到一个错误，即 v-model 不支持此元素类型。

我知道我是如何在这里实现的：jsFiddle

我该如何解决这个错误或者有更好的方法来实现这个？

我还将下面的代码粘贴给那些喜欢在这里阅读的人。

<div id="app">
  <div v-for="(file,i) in files" v-model="file.fileId = i">
    <p>{{file.filename}}</p>

    <select v-model="file.selectedMaterial">
      <option disabled selected>Select material</option>
      <optgroup v-for="(alloys, name) in materials" :label="name">
        <option v-for="(thickness, alloy) in alloys" :value="[alloy, thickness]">{{alloy}}</option>
      </optgroup>
    </select>

    <select v-model="file.selectedThickness">
      <option disabled selected>Select thickness</option>
      <option v-for="thickness in file.selectedMaterial[1]">{{thickness}}</option>
    </select>
    <br><br>
  </div>

  <p v-for="file in files">{{file}}</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        files: [
        {"filename": "a.dxf", "selectedMaterial":"","selectedThickness":"", "fileId":NaN},
        {"filename": "b.dxf", "selectedMaterial":"","selectedThickness":"", "fileId":NaN},
        ],

        materials: {
                "Aluminium": {
                "AW1050":[1, 1.5, 2, 2.5, 3],
                "AW5754":[1, 1.5, 2, 3, 4, 5, 6],
                "AW5083":[1, 1.5, 2, 3, 4, 5, 6]
                },
          "Stainless Steel": {
                "304 / EN 1.4301": [0.5, 0.8, 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12],
                "316 / EN 1.4404": [0.5, 0.8, 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12]
                },
            },
        test:""

    }
})

Answer 1

问题是，您在 div 上使用 v-model，这不是表单输入，如 docs 中所述：

您可以使用 v-model 指令在表单输入、文本区域和选择元素上创建双向数据绑定。

首先，您需要从 div 中删除 v-model。

然后，由于默认通过 HTML 设置选定值，您将收到警告，因此只需从 <option disabled selected> 中删除 selected 属性。

下面的 sn-p 有我提到的变化。

var app = new Vue({
    el: '#app',
    data: {
        files: [
        {"filename": "a.dxf", "selectedMaterial":"","selectedThickness":"", "fileId":NaN},
        {"filename": "b.dxf", "selectedMaterial":"","selectedThickness":"", "fileId":NaN},
        ],
        
        materials: {
    			"Aluminium": {
      			"AW1050":[1, 1.5, 2, 2.5, 3],
      			"AW5754":[1, 1.5, 2, 3, 4, 5, 6],
      			"AW5083":[1, 1.5, 2, 3, 4, 5, 6]
    			},
          "Stainless Steel": {
      			"304 / EN 1.4301": [0.5, 0.8, 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12],
      			"316 / EN 1.4404": [0.5, 0.8, 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12]
    			},
    		},
        test:""
        
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div id="app">
  <div v-for="(file,i) in files">
    <p>{{file.filename}}</p>
  
    <select v-model="file.selectedMaterial">
      <option disabled>Select material</option>
      <optgroup v-for="(alloys, name) in materials" :label="name">
        <option v-for="(thickness, alloy) in alloys" :value="[alloy, thickness]">{{alloy}}</option>
      </optgroup>
    </select>
    
    <select v-model="file.selectedThickness">
      <option disabled>Select thickness</option>
      <option v-for="thickness in file.selectedMaterial[1]">{{thickness}}</option>
    </select>
    <br><br>
  </div>
  
  <p v-for="file in files">{{file}}</p>
</div>