从 Vue 组件中的总线值获取布尔值

Question

我在表单中有一个 vue multiselect 的 vue 组件。我想disable/enable这个直到其他两个字段被填写。

我已经通过组件内的总线值访问了该数据，但是当我尝试使用它时，我从未像预期的那样得到正确或错误的答案。

我正在尝试使用由 selectedTopic && questionTitle 控制的 enableKeywords 更新 disabled 属性，这两个值都来自根或其他组件，我可以看到它们的数据通过 Vue 开发工具在此组件的根目录中更新。

多选组件

<template>
  <div>
    <multiselect 
    v-model="internalValue" tag-placeholder="Add this as new tag" placeholder="Search" 
label="name" track-by="id" :options="options" :multiple="true" :disabled="enableKeywords">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    props: ['value'],
    data () {
      return {
        internalValue: this.value,
        options: [],
        selectedTopic: null,
        questionTitle: null,
        enableKeywords: selectedTopic && questionTitle
      }
    },
    mounted(){
      axios.get('/vuekeywords').then(response => this.options = response.data);
      bus.$on("send-topic", selectedTopic => this.selectedTopic = selectedTopic);
      bus.$on("send-title", questionTitle => this.questionTitle = questionTitle);
    },
    watch: {
      internalValue(v){
        bus.$emit('send-keywords', v);
        this.$emit('input', v);
      }
    }
  }
</script>

Answer 1

总线有两个附加事件，$emit 和 $on。 $收到两个参数后，将 enableKeywords 切换为 true

Answer 2

为了在您想要的任一属性未填充时使 disabled 为真，您应该取反布尔值 selectedTopic && questionTitle。

:disabled="!(selectedTopic && questionTitle)"

从 Vue 组件中的总线值获取布尔值

Get Boolean from Bus values in Vue Component

vue.js

vue-component

vuejs2