Question

我正在尝试设置与所选单选按钮对应的输入值，但我无法弄清楚如何。

<input type="text" class="input" name="provider" v-model="selected_provider">

<b-radio-group v-model="provider_options">
    <div class="field">

        <template v-for="provider in providers">
            <b-radio
                name="select_provider[]" id="provider_@{{ $index }}"
                model="selected_provider"
                value="provider"
                type="radio">
                @{{ provider.provider_name }}
            </b-radio>
        </template>

    </div>
</b-radio-group>

我设法显示一个数组，输入显示selected_provider中写的任何内容，但我不知道如何将它们链接在一起。

var app = new Vue({
    el: '#app',
        data: {
            selected_provider: '',
                providers: [
                    {
                        provider_name: 'Twitch',
                        provider_url: 'https://www.twitch.tv/'
                    },
                    {
                        provider_name: 'Smashcast',
                        provider_url: 'https://www.smashcast.tv/'
                    },
                    {
                        provider_name: 'AzubuFrost',
                        provider_url: 'https://www.smashcast.tv/'
                    }
                ]
            },
        });

此外，我想附上

的值

<input type="text" class="input" name="name" id="name">

到provider_url

中selected_provider的末尾

有人帮我这么好吗？

Answer 1

如果您将for循环设置为v-for="(provider, index) in providers"您可以将v-on:click="setSelectedProvider(index)"置于<b-radio></b-radio>内，并可以创建如下所示的方法：

setSelectedProvider: function(index){
    this.$set(this, 'selected_provider', index);
}

每当单击一个单选按钮时，这会将selected_provider设置为单击的单选按钮的索引。

至于将其他输入的值附加到provider_url的末尾，您可以创建一个执行此操作的方法：

updateProviderURL: function(event){ 
    this.$set(this.providers[this.selected_provider], 'provider_url', 
    'https://www.twitch.tv/' + event.currentTarget.value);
}

然后，您可以为输入添加一个如下所示的侦听器：

v-on:input="updateProviderURL($event)"

最好将selected_provider默认设置为组件数据部分内的0，以便updateProviderURL函数永远不会尝试设置不存在的数组的一部分;）

根据单选按钮设置输入[文本]值

1 个答案: