如何根据html vue js中的字符串选项选择行？答案

【问题标题】：How to select rows based on string options in html vue js?如何根据html vue js中的字符串选项选择行？
【发布时间】：2018-10-04 12:39:54
【问题描述】：

我需要根据选择选项添加新行。如果我的选项是“kfc”，我需要选择一个特定的行。如果我选择的选项是“cemrt”，我需要添加另一行。

<div class="card-content" v-for="(bok, index) in rules" :key="index">
 <div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
 <label class="control-label">Booked</label>
 <select class="form-control" v-model="bok.name">
 <option value="SEENAT">SEENAT</option>
 <option value="CEMRT">CEMRT</option>  
 <option value="KFC">KFC</option>  
 </select>
 </div>
</div>
</div>
<div class="row" v-if="bok.name == SEENAT"> //NOT WORKING FROM HERE
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Arms(if any)</label>
 <input type="text" class="form-control" v-model="bok.data.head" required="">
 </div>
 </div>
 </div>
 <div class="row" v-if="bok.name == KFC">
<div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Arms(if any)</label>
 <input type="text" class="form-control"  required="">
 </div>
 </div>
 </div>
</div>

但我使用此代码无法根据选项添加行。

我的vue js代码是

addForm = new Vue({
el: "#addForm",
  data: {
      rules : [{
        name:null,
        section:null,
        data   : [{head:null,value:null}]
    }],  
},
  methods: {
     addNewRules: function() {
      this.rules.push({ name: null, section: null,data [{head:null,value:null}] });
    },

},

});

如果我将选项值用作 1、2、3 等。我会得到结果。

但我需要将 SEENAT、CEMRT、KFC 作为数据发送。我怎样才能达到这个结果。

【问题讨论】：

在这里重现您的问题？ codesandbox.io/s/vue

标签： javascript jquery html vue.js vue-component

【解决方案1】：

很难说。欢迎复制代码沙盒。乍一看，我在您的代码中可以看到：

1) 您忘记了选项键周围的引号，因此它需要一个常量。您使用双等号而不是三等号的事实无济于事：

v-if="bok.name === 'SEENAT'" // this
v-if="bok.name == SEENAT" // instead of that

2) 数据应该是一个函数：

data() {
  return {
    rules: [
      {
        name: null,
        section: null,
        data: [{ head: null, value: null }]
      }
    ]
  };
},

【讨论】：