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

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"，您可以在 <b-radio></b-radio> 中放置一个 v-on:click="setSelectedProvider(index)"，并可以创建如下所示的方法：

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 函数就不会尝试设置不存在的数组部分；）