Question

是否有办法将索引设置为1而不是0，因为在我的代码的大多数地方使用索引+ 1有点伤害我。

＆＃13;

Vue.component('BuySubscription', {
  template: '#buy-subscription',
  data() {
    return({
      perMonth: 19,
      selectedSubscription: 0
    })
  },
  methods: {
    fnSelectedSubscription() {
      console.log('you have selected:' + this.selectedSubscription * this.perMonth);
    },
    fnPluralize(i) {
      return (i > 0) ? 's': ''
    },
    fnInsertIndent(i) {
      i = i+1;

      if (i === 1) {
        return '........................'
      } else if(i <= 9) {
        return '......................'
      } else if (i <= 12){
        return '....................'
      }
    }
  }
});

new Vue({
  el: '#app',
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app" class="col-lg-6 d-flex align-items-center">
  <buy-subscription></buy-subscription>
</div>

<script type="text/x-template" id="buy-subscription">
  <div>
    <p>Please select subscription to purchase.</p>
    <div class="form-group">
      <select class="form-control" v-model="selectedSubscription">
        <option value="0" selected>Select Subscription...</option>
        <option :value="index+1" v-for="(val, index) in 12">
          {{index+1}} Month{{ fnPluralize(index) }} {{ fnInsertIndent(index) }} ${{perMonth * (index+1)}}
        </option>
      </select>
    </div>
    <h1 class="text-center">${{selectedSubscription * perMonth}}.00</h1>
    <button class="btn btn-warning btn-block"
            :class="{disabled: selectedSubscription <= 0}"
            @click="fnSelectedSubscription">
      Buy now with <i>PayPal</i>
    </button>
  </div>
</script>

＆＃13;

Answer 1

当您使用range v-for时，value从1开始，而索引从零开始。

因此，在您的情况下，只需使用该值。

＆＃13;

console.clear()


new Vue({
  el:"#app"
})

＆＃13;

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div v-for="val, index in 10">Value: {{val}}, Index: {{index}}</div>
</div>

＆＃13;

如何将索引/键值设置为1而不是0

1 个答案: