我的问候。
放在上下文中,我问这个问题的目的是能够根据<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>