我正在尝试用来自 api 的 vue 填充我的选择,但我没有得到我需要的结果,我从 api 带来数据,数据完美到达没有问题,但是当试图将数据传递给 v-select它不加载,这是我的代码的一部分,在其中我想加载名称并将它从 api 带来的公社的 id 传递给数据库...
<template>
<div id="cliente-edit-tab-info">
<vx-card>
<form @submit.prevent="agregar">
<!-- Content Row -->
<div class="vx-row">
<div class="vx-col md:w-1/2 w-full">
<vs-input class="w-full mt-4" label="Rut" v-model="cliente.rut" v-validate="'required|alpha_num'" name="rut" />
<span class="text-danger text-sm" v-show="errors.has('dni')">{{ errors.first('dni') }}</span>
<div class="mt-4">
<label class="vs-input--label">Comuna</label>
<v-select multiple
:value.sync="comunas.id"
:options="comunas.name">
</v-select>
<!-- <option v-for="(comuna, index) in comunas" :key="index">
{{comunas.name}}
</option> -->
<!-- <v-select v-model="status_local" :clearable="false" :options="statusOptions" v-validate="'required'" name="communes_id" :dir="$vs.rtl ? 'rtl' : 'ltr'" /> -->
<!-- <span class="text-danger text-sm" v-show="errors.has('communes_id')">{{ errors.first('communes_id') }}</span> -->
</div>
<vs-input class="w-full mt-4" label="Email" v-model="cliente.correo" type="email" v-validate="'required|email'" name="correo" />
<span class="text-danger text-sm" v-show="errors.has('correo')">{{ errors.first('correo') }}</span>
</div>
<div class="vx-col md:w-1/2 w-full">
<div class="mt-4">
<vs-input class="w-full mt-4" label="Edificio/Condominio" v-model="cliente.nombre" v-validate="'required|alpha_spaces'" name="nombre" />
<span class="text-danger text-sm" v-show="errors.has('nombre')">{{ errors.first('nombre') }}</span>
</div>
<div class="mt-4">
<vs-input class="w-full mt-4" label="Dirección" v-model="cliente.direccion" v-validate="'required|alpha_spaces'" name="direccion" />
<span class="text-danger text-sm" v-show="errors.has('direccion')">{{ errors.first('direccion') }}</span>
</div>
<vs-input class="w-full mt-4" label="Telefono" v-model="cliente.telefono" v-validate="'alpha_spaces'" name="telefono" />
<span class="text-danger text-sm" v-show="errors.has('telefono')">{{ errors.first('telefono') }}</span>
</div>
</div>
<!-- Save & Reset Button -->
<div class="vx-row">
<div class="vx-col w-full">
<div class="mt-8 flex flex-wrap items-center justify-end">
<vs-button class="ml-auto mt-2" @click="agregar" >Guardar</vs-button>
<vs-button class="ml-4 mt-2" type="border" color="warning" @click="reset_data">Resetear</vs-button>
</div>
</div>
</div>
</form>
</vx-card>
</div>
</template>
<script>
import axios from 'axios'
import vSelect from 'vue-select'
export default {
components: {
vSelect
},
data() {
return {
clientes: [],
cliente: {name: '', email: '', dni: ''},
comunas:[],
}
},
computed: {
comunas(){
return Object.values(this.comunas);
}
},
mounted(){
this.created()
},
created(){
axios.get('/api/clientes/create')
.then(res => {
this.comunas = res.data;
})
},
methods: {
agregar(){
//console.log(this.user.name, this.user.email, this.user.dni, this.user.id);
const params = {
name: this.cliente.name,
email: this.cliente.email,
dni: this.cliente.dni,
}
axios.post('/api/clientes/store', params)
.then( res =>{
this.clientes.push(res.data);
this.$router.push('/apps/clientes/clientes-list');
})
},
},
}
</script>
我正在寻找加载公社的名称并将该公社的 ID 保存在数据库中。
这是 api 的返回方式:
在这里我分享我的完整代码以进行更详细的审查
请执行下列操作:
并在您的模型中添加
selectComunas
:如果您显示以下内容:
<p>{{selectComunas}}</p>
您将能够看到您选择的项目。发生的情况是选项必须接收一个数组,并且您正在向它传递一个对象,并且在该对象内您只有所需的数组。尝试将 comunas.comunas 传递给选项。你的 v-select 看起来像这样
有了它,它应该可以工作。