Question

我正在使用CMS创建一个前端表单，客户（影院导演）可以在其中定义多个放映时间。我有一个他们点击的按钮＆＃34;添加另一个＆＃34;根据需要输入字段（旁注：我不知道如何使用Vue启用＆＃39;删除最后一个按钮，但这是另一天的另一个主题）。

我已经开始工作了。但是现在，一旦导演创建了他们的放映时间并且他们回来编辑它们，我需要Vue计数器的起始索引是已经存在的字段数。因此，如果他们已经定义了3个放映时间（0,1,2），则使用Vue动态放置的第一个字段应该以3开头。

或者，我想知道在页面加载时是否更容易在Vue中生成现有数据的数组，但我不知道我从哪个方法开始。< / p>

这是我的HTML和Vue JS：

＆＃13;

new Vue({
  el: '#app',

  data: {
    timeslots: [
      {
        count: 0
      }
    ],
    count: 0
  },

  methods: {
    addAnother: function(){
      this.timeslots.push({
        count: ++this.count
      });
    }
  }
});

＆＃13;

<div id="app">
  {{ performances }}
    <input name="performances[{{ zero_index }}][showtime]" value="{{ showtime }}">
  {{ /performances }}

  <template v-for="slot in timeslots">
    <input name="performances[@{{ slot.count }}][showtime]" value="{{ now }}">
  </template>
  
  <div>
    <button @click.prevent="addAnother">Add another</button>
  </div>
</div>

＆＃13;

欢迎前进的任何帮助！

Answer 1

我使用我在OP中推测的第二种方法，使用$index代替count之类的任意整数，在比预期更短的时间内解决了这个问题。此方法需要将JS直接放在我的模板中，而不是放在单独的文件中。但那对我来说很好。

<div id="oven">
  <template v-for="biscuit in oven">
    <div>
      <input type="text" name="performances[@{{ $index }}][showtime]" value="@{{ biscuit.showtime }}">
    </div>
  </template>
  <span class="add small black btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
</div>

<script>
new Vue({
  el: '#oven',

  data: {
    oven: [
      {{ performances }}
      {
        showtime: "{{ showtime }}"
      },
      {{ /performances }}
    ]
  },

  methods: {
    addAnother: function(){
      this.oven.push({
        showtime: '{{ now modify_date="+2 months" format="Y-m-d" }} 7:30 PM'
      });
    }
  }
});
</script>

使用Vue JS

1 个答案: