Javascript 如何在html vue js中基于字符串选项选择行？

我需要根据选择选项添加新行。 如果我的选项是“肯德基”，我需要选择一个特定的行。如果我选择的选项是“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>

如果我使用选项值1，2，3等，我得到的结果

---

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

很难说。欢迎在codesandbox上复制。 我第一眼看到的代码：

1） 您忘记了选项键周围的引号，因此它需要一个常量。事实上，您使用的是double equals而不是triple，这无助于：

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

在这里重现你的问题？

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