为什么如果我得到计算对象中的对象属性未定义而不是对象本身？哪种方法更适合这种情况？

Question

我的问候。

在上下文中，我问这个问题的目的是能够在基于 <app-selector> Vue 组件的 selected 选项的表单中呈现一个子组件，使其尽可能简单就这么傻。

为了简单起见。我在这里做了一个片段来揭示我想要弄清楚的东西。基本上，目的是通过使用计算的属性 cardTypeComponent 来获取要呈现的组件名称。但是，我想了解 cardTypeComponent 的工作方式，因为我不明白为什么一方面第一个 return (return this.form) 给对象 (this.form ) 与我想要的属性 (card_type) 但另一方面，第二个 return (return this.form.card_type ? this.form.card_type + 'Compose' : '') 给了我一个空字符串，假设 this.form.card_type 是undefined 看第一个return 就很清楚了，其实不是把它当成undefined.

有更多上下文，因为一旦选项被 selected，在设置 this.form 对象内的值之前，服务器会进行验证过程。此外，表单交互是通过步骤进行的，因此一旦用户 select 选项，他必须单击一个按钮才能到达与该类型卡片对应的表单字段 selected，因此该组件不会运行在用户 select 的第一时间呈现一个选项，就像在片段方法中一样。但是，它会纠缠我的要求。提前致谢。

最好用下面的Fiddlelink

片段

var appSelector = Vue.component('app-selector', {
  name: 'AppSelector',
  template: `<div>
               <label for="card_type">Card Type:</label>
               <select :name="name" value="" @change="sendSelectedValue">
                 <option v-for="option in options" :value="option.value">
                  {{ option.name }}
                 </option>
           </select>
             </div>`,
  props: {
    name: {
      required: false,
      type: String,
    },
    options: {
      required: false,
      type: Array,
    }
  },
  methods: {
    sendSelectedValue: function(ev) {
      this.$emit('selected', ev.target.value, this.name)
    }
  }
});

var guessByImageCompose = Vue.component({
  name: 'GuessByImageComponse',
  template: `<p>Guess By Image Compose Form</p>`
});

var guessByQuoteCompose = Vue.component({
  name: 'GuessByQuoteComponse',
  template: `<p>Guess By Quote Compose Form</p>`
});

new Vue({
  el: '#app',
  components: {
    appSelector: appSelector,
    guessByImageCompose: guessByImageCompose,
    guessByQuoteCompose: guessByQuoteCompose,
  },
  data() {
    return {
      form: {},
      card_types: [
        {
          name: 'Guess By Quote',
          value: 'GuessByQuote'
        },
        {
          name: 'Guess By Image',
          value: 'GuessByImage'
        }
      ],
    }
  },
  computed: {
    cardTypeComponent: function() {
        return this.form; // return { card_type: "GuessByImage" || "GuessByQuote" }
        return this.form.card_type ? this.form.card_type + 'Compose' : ''; // return empty string ("") Why?
    }
  },
  methods: {
    setCardType: function(selectedValue, field) {
      this.form[field] = selectedValue;
      console.log(this.form.card_type); // GuessByImage || GuessByQuote
      console.log(this.cardTypeComponent); // empty string ("") Why?
    }
  },
  mounted() {
    console.log(this.cardTypeComponent); // empty string ("")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form action="#" method="post">
    <app-selector
      :name="'card_type'" 
      :options="card_types"
      @selected="setCardType"
    >
    </app-selector>
    {{ cardTypeComponent }} <!-- Always empty string !-->
    <component v-if="cardTypeComponent !== ''" :is="cardTypeComponent">
      
    </component>
  </form>
</div>

https://jsfiddle.net/k7gnouty/2/

Answer 1

您正在 this.form 上设置一个属性，它没有首先在 data 中初始化。这意味着你在设置 Vue 的 change detection caveat. Use Vue.set 时将运行设置为：

methods: {
  setCardType: function(selectedValue, field) {
    Vue.set(this.form, field, selectedValue);
  }
}

或者，如果更适合您，您可以先声明属性。

为什么如果我得到计算对象中的对象属性未定义而不是对象本身？哪种方法更适合这种情况？

Why if I get the object property within the computed object gets undefined but not the object itself? Which approach fits better in this context?

javascript

vue.js

vuejs2

vue-dynamic-components

片段

为什么如果我得到计算对象中的对象 属性 未定义而不是对象本身？哪种方法更适合这种情况？

Why if I get the object property within the computed object gets undefined but not the object itself? Which approach fits better in this context?

javascript

vue.js

vuejs2

vue-dynamic-components

片段

为什么如果我得到计算对象中的对象属性未定义而不是对象本身？哪种方法更适合这种情况？