通过道具带来数据

时间:2019-05-16 14:46:57

标签: vue-component vuex

如何在不更改v模型的情况下在vue中获得选定内容。我正在使用Vuex,并且希望它显示已经选择的“ seletedClient”为我带来数据。有什么想法吗?

edit.blade.php

<div class="form-group row">
  <label class="col-sm-3 col-form-label">Rut Cliente Seleccionado</label>
  <div class="col-sm-6">
    {{$clientRut}}
  </div>
</div>
<client-rut-finder :selected-client="'{{$clientRut}}'" accion="edit"></client-rut-finder>

ClientRutFinder.vue

<template>
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">Rut Cliente</label>
    <div class="col-sm-6">
      <v-select
        class="input-blanco"
        :options="clientes"
        placeholder="Seleccione un rut"
        v-model="clienteSeleccionado"
        label="rut"
      >
        <template slot="option" slot-scope="option">
          {{ option.rut }} / {{ option.razon_social }}
        </template>
        <div slot="no-options">No hay clientes disponibles en Manager Mas</div>
      </v-select>
      <textarea name="client" style="display: block;">{{
        clienteSeleccionado
      }}</textarea>
    </div>
  </div>
</template>

<script>
  import vSelect from "vue-select";
  import { mapState, mapMutations, mapActions } from "vuex";
  export default {
    props: ["selectedClient", "accion"],
    components: { vSelect },
    name: "client-rut-finder",
    created() {
      this.cargarClientes();
    },
    mounted() {
      if (this.accion == "edit") {
        this.setSelected();
      }
    },
    methods: {
      ...mapMutations([
        "llenarClientes",
        "llenarContactos",
        "cargarContactos",
        "EDIT_clienteSeleccionado"
      ]),
      ...mapActions([
        "cargarClientes",
        "cargarContactos",
        "editClienteSeleccionado"
      ]),
      edit(clienteSeleccionado) {
        this.$store.dispatch("editclienteSeleccionado", clienteSeleccionado);
      },
      setSelected: function() {
        return this.selectedClient;
      }
    },
    computed: {
      ...mapState([
        "clientes",
        "clienteSeleccionado",
        "cliente",
        "cargarContactos"
      ]),
      clienteSeleccionado: {
        set(value) {
          console.log("hey se viene el value");
          console.log(value);
          this.$store.commit("clienteSeleccionado", value);
          console.log("esto es consola2");
          this.$store.dispatch("cargarContactos", value);
          this.$store.dispatch("cargarDirecciones", value);
          this.$store.dispatch("cargarDocumentos", value);
        },
        get() {
          return this.$store.state.clienteSeleccionado;
          console.log("esto es consola1");
        }
      },
      cargarContactos: {
        set(value) {
          console.log(value);
        },
        get() {},
        cargarDirecciones: {
          set(value) {
            console.log(value);
          },
          get() {}
        },
        cargarDocumentos: {
          set(value) {
            console.log(value);
          },
          get() {}
        }
      }
    }
  };
</script>

0 个答案:

没有答案