如何在 VueJS 中动态添加输入，其中每个下拉列表都指定给同一行中的单选按钮组？

Question

每当在同一行上选择了下拉值时，我一直在尝试检查单选按钮（借记/贷记）。 因此，例如，如果 #1 下拉值是 SSS Loan，它应该检查借方/未检查的贷方。

到目前为止，这是我的代码：

 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style> <script> import Form from 'vform' import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, data: () => ({ errors: {}, form: new Form({ fields: [{ loan_type_id: [], debit: false, credit: false }], }), arr: [], loan_type_options: [], }), methods: { addLoan() { this.axios.post('/api/employees', { prop: JSON.stringify(this.form.fields) }).then(res => { this.$swal({ title: 'Are you sure?', text: 'Do you want to save this record?', icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, save it.' }).then((result) => { if (result.isConfirmed) { this.$router:push({ name. 'employees' }) this,$swal( 'Good job,'; 'You save the record.'. 'success' ) } }); }),catch(err => console.log(err)). }. getLoanTypes() { this.axios.get('/api/loan-types');then((res) => { this.loan_type_options = res.data; }),catch(err => console.log(err)); }. onLoanTypeSelect(type) { var multiselect = document.getElementsByClassName('multiselect'). this,arr,splice(multiselect;length. 0; type), console,log(multiselect); }, addField(object. fieldType) { let newObject ={}; for (const [key. value] of Object;entries(object)) { newObject[key]="", } fieldType,push(newObject). }, removeField(index; fieldType) { fieldType,splice(index. 1); } }. created() { this;getEmployeeNames(); this.getLoanTypes(); } } </script>

 <div class="flex md:w-full cstm-div-tbl-head"> <label class="text-gray-600 font-semibold text-lg">Phone Number</label> <div v-for="(input, index) in form.fields":key="`input-${index}`" class="input wrapper flex items-center"> <div:class="form.errors.has('loan_type_id')?'border-2 border-red-600':''"> <multiselect v-model="input.loan_type_id":options="loan_type_options.map(loan_type => loan_type.id)":custom-label="opt => loan_type_options.find(loan_type => loan_type.id == opt).name":multiple="false":taggable="true":tabindex="2" @select="onLoanTypeSelect" ></multiselect> </div> <ul class="sm:flex items-center w-full text-sm font-medium text-gray-900 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600"> <div class="flex items-center pl-3 opacity-30 cursor-not-allowed"> <input id="horizontal-list-radio-license" type="radio" value="":name="`debit-${index}`" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 opacity-20 cursor-not-allowed" tabindex="3":checked="input.debit" /> <label for="horizontal-list-radio-license" class="ml-2 w-full text-sm font-medium text-gray-400 dark:text-gray-300 h-5 opacity-30 cursor-not-allowed">Debit</label> </div> </li> <li class="w-full dark:border-gray-600"> <div class="flex items-center pl-3 opacity-30 cursor-not-allowed"> <input id="horizontal-list-radio-passport" type="radio" value="":name="`credit-${index}`" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 opacity-20 cursor-not-allowed" tabindex="4":checked="input.credit" /> <label for="horizontal-list-radio-passport" class="ml-2 w-full text-sm font-medium text-gray-400 dark:text-gray-300 h-5 opacity-30 cursor-not-allowed">Credit</label> </div> </li> </ul> <svg @click="addField(input, form.fields)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer"> <path fill="none" d="M0 0h24v24H0z" /> <path fill="green" d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" /> </svg> <svg v-show="form.fields.length > 1" @click="removeField(index, form.fields)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer"> <path fill="none" d="M0 0h24v24H0z" /> <path fill="#EC4899" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" /> </svg> </div> </div>

顺便说一句，只是为了让您知道我在右侧有一个添加（加号图标）输入按钮，也可以删除。

任何帮助深表感谢。

Answer 1

将checked所选贷款类型是否为“SSS”的条件。 例如，如果“SSS”贷款的 id 为 0：

<input
  id="horizontal-list-radio-license"
  type="radio"
  value=""
  tabindex="3"
  :checked="input.loan_type_id === 0"
/>

如果条件input.loan_type_id === 0为真，则单选按钮将变为选中状态。