Question

我设置了一个Vue.js文件，该文件基本上是一个中继器，如果在菜单中选择了其他选项，我希望它可以利用开关盒。在这种情况下，我希望为它选择try: test = Dic[2] print ("yay") #do some action except: print ("boo") #do some other action以显示数量列（最初隐藏），并通过将其附加到DOM来显示所选输入框的数量。我一直试图使它在Vue.js中正常工作，但是除了我现在所处的位置，别无所求。

MC

var app = new Vue({
  el: "#app",
  data: {
    rows: [4]
  },
  methods: {
    addRow: function() {
      var elem = document.createElement('tr');
      this.rows.push({
        title: ""
      });
    },
    removeElement: function(index) {
      this.rows.splice(index, 1);
    },
  }
});

Answer 1

利用v-model。还要为每行定义type和amount属性，当type为mc时，将显示选择的金额。

通知：使用Vue.js时，您不必直接操作DOM，而只需操作数据属性。

new Vue({
  el: "#app",
  data: {
    rows: []
  },
  methods: {
    addRow: function() {
      this.rows.push({
        title: "",
        type: "",
        amount: ""
      });
    },
    removeElement: function(index) {
      this.rows.splice(index, 1);
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table class="table">
    <thead>
      <tr>
        <td><strong>Question</strong></td>
        <td><strong>Type</strong></td>
        <td><strong>Amount</strong></td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows">
        <td><input type="text" v-model="row.title"></td>
        <td>
          <select v-model="row.type">
            <option value="single">Single</option>
            <option value="multi">Mutlt</option>
            <option value="mc">MC</option>
          </select>
        </td>
        <td>
          <select v-show="row.type === 'mc'">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </td>
        <td>
        </td>
        <td>
          <button @click="removeElement(index)">Remove</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <button class="button btn-primary" @click="addRow">Add row</button>
  </div>
</div>

vue.js根据菜单选择添加动态输入字段

1 个答案: