Question

不确定如何解释此问题，我在文档中找不到答案。

基本上，在我的数据中，我得到了一个带有2个值的数组，它们表示一周中某天的索引。我想制作一个range组件，可以在其中添加一些其他功能，例如，在我的示例中，这将是一个带有2个手柄的范围滑块，但我还没有添加样式。

Vue.component('range', {
  props: [ 'step', 'min', 'max', 'value' ],
  created() {
    this.minValue = this.value[0];
    this.maxValue = this.value[1];
  },
  data: function() {
    return {
      minValue: 0,
      maxValue: 0
    }
  },
  template: `<div>
    <input type="range" name="points" :min="this.min" :max="this.max" :step="this.step" :value="minValue">
    <input type="range" name="points" :min="this.min" :max="this.max" :step="this.step" :value="maxValue">
  </div>`
});

window.app = new Vue({
  el: '#app',
  data: {
    'weekdays': [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday' ],
    'locations': [
      {
        'id': 1,
        'name': 'Test Place',
        'hours': [
          {
            'id': 1,
            'weekdays': [ 0, 4 ]
          },
          {
            'id': 2,
            'weekdays': [ 5, 5 ]
          },
          {
            'id': 3,
            'weekdays': [ 6, 6 ]
          }
        ]
      }
    ]
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div class="location" v-for="(location, index) in locations">
    <h3>{{ location.name }}: {{ location.id }}</h3>
    <div class="hours">
      <div v-for="(hour, index) in location.hours">
        <p>Hour ID: {{ hour.id }}</p>
        <range step="1" min="0" max="6" :value="hour.weekdays"></range>
      </div> 
    </div>
  </div>
</div>

我在上面创建了一个最小的示例。现在，我的问题是，有没有一种方法可以不发送数据回到父级，我可以使用v-model来基于我的主要组件中的两个滑块来更改数组。

所以，理论上的例子：

<range step="1" min="0" max="6" :value="hour.weekdays" v-modal="hour.weekdays"></range>

Answer 1

v-model只是用于合成糖

<some-component
    v-bind:value=""
    v-on:input="">
</some-component>

因此，您可以通过在组件内部添加观察者并发出具有数组值的事件来在组件上使用v-model。

Vue.component('range', {
  props: [ 'step', 'min', 'max', 'value' ],
  created() {
    this.minValue = this.value[0];
    this.maxValue = this.value[1];
  },
  data: function() {
    return {
      minValue: 0,
      maxValue: 0
    };
  },
  methods: {
    emitOut() {
    	this.$emit('input', [this.minValue, this.maxValue]);
    },
  },
  watch: {
    minValue(newVal) {
    	this.emitOut();
    },
    maxValue(newVal) {
    	this.emitOut();
    },
  },
  template: `<div>
    <input type="range" name="points" :min="this.min" :max="this.max" :step="this.step" v-model="minValue">
    <input type="range" name="points" :min="this.min" :max="this.max" :step="this.step" v-model="maxValue">
  </div>`
});

window.app = new Vue({
  el: '#app',
  data: {
    'weekdays': [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday' ],
    'locations': [
      {
        'id': 1,
        'name': 'Test Place',
        'hours': [
          {
            'id': 1,
            'weekdays': [ 0, 4 ]
          },
          {
            'id': 2,
            'weekdays': [ 5, 5 ]
          },
          {
            'id': 3,
            'weekdays': [ 6, 6 ]
          }
        ]
      }
    ]
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div class="location" v-for="(location, index) in locations">
    <h3>{{ location.name }}: {{ location.id }}</h3>
    <div class="hours">
      <div v-for="(hour, index) in location.hours">
        <p>Hour ID: {{ hour.id }}</p>
        First: {{ hour.weekdays[0] }}
        Second: {{ hour.weekdays[1] }}
        <range step="1" min="0" max="6" v-model="hour.weekdays"></range>
      </div> 
    </div>
  </div>
</div>

VueJS：将值绑定到组件

1 个答案: