如何使Vue组件与v型保持值类型一起工作？

Question

问题

当我在HTML v-model上拥有一个<select>时，v-model是将给定的属性设置为该值的选定值保持类型--如果我将一个数字绑定到<option>，则模型属性被设置为number，如果我绑定一个对象，则它被设置为该对象。

<script>
export default {
  data: {
    options: [5, 10, 15, 'text', { 'description': 'I am an Object' }],
  }
};
</script>

<template>
  <select v-model="model">
    <option
      v-for="option in options"
      :value="option"
    >
      {{ option }}
    </option>
  </select>
<template>

我有一个<base-select>自定义组件，它为我包装<select>标记的用法。我试图为它实现相同的v-model行为，但是失败了，因为类型没有被保留--我一直被返回String，甚至在绑定数字或对象时也是如此。

//// BaseSelect.vue

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      required: true
    }
  },
};
</script>
<template>
  <select
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
    <option
      v-for="option in options"
      :value="option"
    >
      {{ option }}
    </option>
  </select>
</template>

//// App.vue

<script>
  @import 'BaseSelect' from './BaseSelect';

  export default {
    components: {
      BaseSelect,
    },
    data: {
      options: [5, 10, 15, 'text', { 'description': 'I am an Object' }],
    }
  };
</script>
<template>
  <base-select
    v-model="model"
    :options="options"
  />
<template>

小提琴

下面是这种行为明显可见的地方：http://jsfiddle.net/4o67pzLs/14/

第一个选择是保留绑定到模型的值类型，而另一个选择是始终将值设置为String。

问题

是否可以在自定义组件上实现v-model，这将保留类型？如果是这样的话，是怎么做的？

Answer 1

下面是我们和@RobertKusznier一起做这件事的方式：

• 使用v-model将select与组件的计算属性绑定
• 为该计算属性定义getter和setter
• getter返回组件的值。
• 设置者发出更改事件。

它保留所选选项值的类型，而不改变组件的值。

@RobertKusznier建议我们不要改变组件的值。

​

let baseSelect = {
	props: {
  	options: {
    	type: Array,
      required: true
    },
    value: {
    	required: true
    }
  },
  
  computed: {
  	valueCopy: {
    	get() {
      	return this.value;
      },
      set(value) {
      	this.$emit('input', value);
      }
    }
  },
  
  template: `
  	<select
      v-model="valueCopy"
    >
      <option
        v-for="option in options"
        :value="option"
      >
        {{ option }}
      </option>
    </select>
  `,
};

new Vue({
	el: '#app',
  components: {
  	baseSelect
  },
  data: {
  	model: 5,
    options: [5, 10, 15, 'text', new Date()]
  },
  template: `
    <div>
      <select v-model="model">
        <option
          v-for="option in options"
          :value="option">
            {{ option }}
        </option>
      </select>
      
      <base-select
        v-model="model"
        :options="options"
        :sister="10"
      />
      
      <p>model: {{ model }}</p>
      <p>typeof model: {{ typeof model }}</p>
    </div>
  `
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>

​