“属性未在实例上定义”即使已定义

Question

我想通过 fork vue-play 为新组件添加一些自己的场景。

我在更复杂的 vue-select 案例中遇到了问题，尤其是双向值同步。

进入这个场景会收到警告：

vue.esm.js:571 [Vue 警告]：属性或方法“syncedVal”不是 在实例上定义但在渲染期间引用。

并且下拉菜单中也没有预先选择任何选项。尽管在组件的道具中定义了syncedVal，但我无法理解为什么我不断收到此警告。 我在vue-play/play 中添加了两个文件：

VSelect.vue:

<template>
    <v-select v-model="selected" :options="options"></v-select>
</template>

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'

    Vue.component('v-select', vSelect);

    export default {
        props: {
            options: {
                default: function() { return ['one', 'two'] },
                type: Array
            },
            onchangeCallback: {
                default: () => () => null
            },
            // doesn't seem to work:
            syncedVal: {
                default: 'one',
                type: String
            }
        },
        data() {
            return {
                selected: null
            }
        }
    }
</script>

和VSelect.play.js:

import {play} from '../src/play'
import VSelect from './VSelect.vue'

play(VSelect)
    .name('VSelect')
    .displayName('VSelect')
    .add('default', '<v-select />')
    .add('multiple', '<v-select multiple />')
    .add('custom options', `<v-select :options="['custom1','custom2']" />`)
    .add('custom options with labels', `<v-select :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`)
    .add('2-way value sync', `<v-select :value.sync="syncedVal" />`) // doesn't seem to work

Answer 1

请注意VSelect.play.js 中的v-select 组件是VSelect.vue

所以有一些错误：

1. .add('multiple', '<v-select multiple />')
   • VSelect.vue 没有 multiple 道具，所以这个 multiple 不会像你预期的那样工作
   • FIX：为你的组件添加props，并将其绑定到v-select
2. .add('2-way value sync',)
   • 你在组件的 props 中定义了syncedVal，但是你在其他组件（vue-play 的组件）上使用它，它们有不同的作用域！
   • FIX：要使用vue-play来演示这个功能，你需要编写一个完整的组件，这样你就可以有数据绑定（见下面的示例代码）
   • VSelect.vue 没有实现同步 (https://vuejs.org/v2/guide/components.html#sync-Modifier)，所以这里什么都不会发生

我从你的组件中做一个例子并玩，我希望这对你有帮助:)

• 我的 vue-play 演示：https://vue-play-select.netlify.com/
• 代码：https://github.com/iampaul83/vue-play-select

我是这样修复它们的：

SelectFramework.vue:

<template>
  <v-select
    v-model="selected"
    :options="options"
    :multiple="multiple">
  </v-select>
</template>

<script>
export default {
  name: "SelectFramework",
  props: {
    options: {
      default: () => ["Vue.js", "React", "Angular"],
      type: Array
    },
    value: String, // to support v-model
    foo: String, // to support :foo.sync
    multiple: false // to support multiple select
  },
  data() {
    return {
      selected: this.value,
    };
  },
  watch: {
    selected () {
      this.$emit('input', this.selected) // update v-model
      this.$emit('update:foo', this.selected) // update foo.sync
    },
    value () {
      this.selected = this.value // update from v-model
    },
    foo () {
      this.selected = this.foo // update from foo.sync
    }
  }
};
</script>

play/index.js:

import { play } from 'vue-play'
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)


import SelectFramework from '../src/SelectFramework.vue'

play(SelectFramework)
  .name('SelectFramework')
  .displayName('Select Framework')
  .add('default', '<select-framework />')
  .add('multiple', '<select-framework multiple />')
  .add('custom options', `<select-framework :options="['custom1','custom2']" />`)
  .add('custom options with labels', `<select-framework :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`)
  // full component to demo v-model and :foo.sync
  .add('v-model', {
    data() {
      return {
        selected: null,
        syncedVal: null
      }
    },
    template: `
      <div>
        <p>selected: {{selected}} </p>
        <p>syncedVal: {{syncedVal}} </p>
        <select-framework
          v-model="selected"
          :foo.sync="syncedVal">
        </select-framework>
        <p>
          <button @click="selected = 'Vue.js'">Set selected to Vue.js</button>
          <button @click="syncedVal = 'React'">Set syncedVal to React</button>
        </p>
      </div>
    `
  })
  // .add('2-way value sync', `<select-framework :value.sync="syncedVal" />`) // doesn't seem to work