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

【问题标题】：Get Boolean from Bus values in Vue Component从 Vue 组件中的总线值获取布尔值
【发布时间】：2017-09-23 07:14:22
【问题描述】：

我在表单中有一个 vue multiselect 的 vue 组件。我想禁用/启用此功能，直到填写其他两个字段。

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

我正在尝试使用由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>

【问题讨论】：

我想这只是:disabled="!(selectedTopic && questionTitle)"
非常感谢，这就是我的想法，但我的语法错误。我没有意识到它需要用括号括起来。请添加为答案，我会接受。干杯

标签： vue.js vuejs2 vue-component

【解决方案1】：

总线附加了两个事件，$emit 和 $on。 $on 接收到这两个参数，然后将你的enableKeywords 切换为true

【讨论】：

那么使用带有if语句的方法来判断enableKeywords是真还是假？谢谢
enableKeywords 是由另外两个元素控制的，对吧？如果这两个不为空，则enableKeywords 为真。您可以在 $on 事件中将其设置为 true，考虑到您 $emit 这两个其他值

【解决方案2】：

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

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

【讨论】：