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

问题描述

我的问候。

放在上下文中，我问这个问题的目的是能够根据<app-selector>Vue 组件的选定选项在表单中呈现子组件，就这么简单和愚蠢。

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

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

最好使用下面的 Fiddle 链接。

片段

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/

标签： javascriptvue.jsvuejs2vue-dynamic-components

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

问题描述

片段

解决方案

推荐阅读