根据单选按钮设置input[text]值

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 中所写的任何内容，但我只是不知道如何 link 将它们组合在一起。

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

根据单选按钮设置input[text]值

Set input[text] value according to radio button

laravel

blade

vue.js