javascript - The value in the component cannot be dynamically bound.

Question

This is the code of the component to be written, and the code that is not a component

    <p id="parent">
        <child :message="animal"></child>
    </p>

    <select name="sth" id="sth">
        <option :value="value">{{text}}</option>
    </select>

The bottom part is JS

Vue.component('child',{
    template:'<select :name="message+\'Select\'">\
        <optgroup :label="message">\
            <option :value="message">{{message}}</option>\
        </optgroup>\
    </select>',
    props:['message']
});
new Vue({
    el:"#parent",
    data:{
        animal:'phoenix'
    }
});
new Vue({
    el:"#sth",
    data:{
        value:'animal',
        text:'animation'
    }
});

The final rendering is

<p id="parent">
    <select name="phoenixSelect">
        <optgroup label="phoenix">
            <option>phoenix</option>
        </optgroup>
    </select>
</p>
<select name="sth" id="sth">
    <option value="animal">animation</option>
</select>

The non-component one below, the value can be displayed as a dynamic value animal normally, and the one above is a component, the name and label are normal, but the value cannot be displayed. Why?

Answer 1

Yes https://jsfiddle.net/stardew/...