Question

我需要根据select选项添加新行。如果我的选项是“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作为数据。我怎样才能达到效果。

Answer 1

很难说。欢迎使用codeandbox进行复制。我乍一看你的代码中可以看到的内容：

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 }]
      }
    ]
  };
},

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

1 个答案: