javascript - Vue js 设置我如何在设置中进行数据绑定？

Question

我正在尝试使用表单中的数据发布帖子，但设置无法识别来自外部的数据，也就是说，当我发送我的对象时它变为空，即使输入中有 databindig。

setup() {
const clientes = ref([]);
const endereco = ref()
const cliente = ref();

const { getClientes, createCliente, deleteCliente, updateCliente, } =
  useClientes();

onMounted(async () => (clientes.value = await getClientes()));

const handleCreateCliente = async (cliente) => {
  const createdCliente = await createCliente(cliente);
  if (createdCliente) {
    clientes.value.push(createdCliente);
  }
};

const handleUpdateCliente = async (cliente) => {
  const updatedCliente = await updateCliente(cliente);
  if (updatedCliente) {
    const index = findIndexCliente(cliente.IdCliente);
    clientes.value.splice(index, 1, updatedCliente);
  }
};

const handleDeleteCliente = async (IdCliente) => {
  const deletedCliente = await deleteCliente(IdCliente);
  if (deletedCliente) {
    removeCliente(IdCliente);
  }
};

const removeCliente = (IdCliente) => {
  clientes.value = clientes.value.filter((cliente) => cliente.IdCliente !== IdCliente);
};

const findIndexCliente = (IdCliente) => {
  return clientes.value.findIndex((cliente) => cliente.IdCliente === IdCliente);
};

return {
  endereco,
  clientes,
  cliente,
  handleCreateCliente,
  handleUpdateCliente,
  handleDeleteCliente,
};

},

这是我的表格，在同样的情况下，将属性粘贴到“客户”和“地址”中，发送时它无法识别它并将其作为未定义的，有人知道如何解决这个问题吗？

<div class="row">
                  <div class="col-md-4">
                    <label>Nome</label>
                    <input type="text" placeholder="Nome do cliente" v-model="cliente.NomeCliente" class="form-control">
                    <label>Sobrenome</label>
                    <input type="text" placeholder="Cidade do cliente" v-model="cliente.SobrenomeCliente" class="form-control">
                    <label>Email</label>
                    <input type="text" placeholder="Email do cliente" v-model="cliente.EmailCliente" class="form-control">
                  </div>

                  <div class="col-md-4">
                    <label for="sobrenome">Estado</label>
                    <input type="text" placeholder="Estado do cliente" v-model="endereco.Estado" class="form-control">
                    <label>Cidade</label>
                    <input type="text" placeholder="Cidade do cliente" v-model="endereco.Cidade" class="form-control">
                    <label>Bairro</label>
                    <input type="text" placeholder="Rua do cliente" v-model="endereco.Bairro" class="form-control">
                  </div>

                  <div class="col-md-4">
                    <label>Rua</label>
                    <input type="text" placeholder="Rua do cliente" v-model="endereco.Rua" class="form-control">
                    <label>Cep</label>
                    <input type="text" placeholder="Cep do cliente" v-model.number="endereco.Cep" class="form-control">
                    <label>Complemento</label>
                    <input type="text"  placeholder="Complemento (Opcional)" v-model="cliente.complemento" class="form-control">
                  </div>
                
                </div>
                    <button class="btn-lg btn-primary fas fa-save mt-2" @click.prevent="handleCreateCliente($event)"> Salvar</button>
                    <button @click.prevent="Limparcampos()" class="btn-lg btn-success fas fa-broom mt-2"> Limpar</button>
               </form> <!-- Fim do container  -->

标签： javascriptvue.jsvuejs2data-binding