Изменения не становятся отвечающими современным требованиям в компоненте VUE

У меня есть компонент VUE так называемый отец "rangos_mes", и этот в свою очередь считает составляющего сына так называемым "rangos_mes_item".

Это оказывается так:

introducir la descripción de la imagen aquí

Проблема состоит в том, что, когда я добавляю новую статью давая click в кнопке "+", стоимость, которую я пишу в новой статье, не оказывается отраженной в договоренности, которая у меня есть в моем объекте app (список статей). Но если я изменяю какую-то информацию о статьях, которые уже существовали (инициализировавшие в списке из-за hardcode) да он отражается.

Когда я смотрю из-за отладчика браузера объект app.rangos, данные о dia_inicial и dia_final линии, которую я только что ввел в компьютер, находятся в нуле, который должен взвешивать, что я написал ему стоимость в полях ввода текста.

Он был бы благодарен за, если кто-то может помогать мне.

Большое спасибо.

Vue.component('rangos_mes', {
    props: [
        'rangos'
    ],
    template: `
        
Dia inicial Dia final
`, methods: { add: () => { rangos_mes_add(); } } }) Vue.component('rangos_mes_item', { props: ['dia_inicial', 'dia_final', 'index'], template: ` `, methods: { del: (indice) => { rangos_mes_del( indice ) } } }) var app = new Vue({ el: '#app', data: { rangos: [ {id: 1, dia_inicial: 1, dia_final: 5}, {id: 2, dia_inicial: 6, dia_final: 15}, {id: 3, dia_inicial: 16, dia_final: 30} ] } }) function rangos_mes_add () { app.rangos.push({id: 4, dia_inicial: 0, dia_final: 0}) } function rangos_mes_del ( indice ) { app.rangos.splice(indice, 1) }
div.rangos_mes {
    width: 400px;
    border: thin solid gray;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding: 10px;
}

input.rangos-mes-add {
    margin: 5px;
}

table.rangos_mes_table {
    width: 100%;
}

input.rangos_mes_dia {
    width: 50px;
}



    
    
    
    
    
    Document


    
    

1
задан 09.08.2019, 03:57
2 ответа

Этот пример podrГ, - чтобы ориентироваться, необходимо манипулировать концепциями vuex , потому что тебя facilitarГЎ много ситуаций, podrГ, - чтобы быть сделанным с автобусом events, но vuex тебе дает возможность делания этого mantenible и масштабируемый.

Vue.config.devtools = false
Vue.config.productionTip = false

// vuex store
const store = new Vuex.Store({
  // estado de la store
  state: {
    // estado inicial de los datos
    rangos: [
      { dia_inicial: 1, dia_final: 5 },
      { dia_inicial: 6, dia_final: 15 },
      { dia_inicial: 16, dia_final: 30 }
    ]
  },
  // mutaciones para cambios de estado síncronos
  mutations: {
    // agrega un rango al estado de los datos
    ADD_RANGO: state => {
      state.rangos.push({ dia_inicial: 0, dia_final: 0 });
    },
    // elimina un rango del estado de los datos de acuerdo al index
    DELETE_RANGO: (state, payload) => {
      state.rangos.splice(payload, 1);
    }
  }
});

Vue.component("rangos-mes", {
  template: `
    <div class="rangos_mes">
      <input 
        @click="add"
        type="button" value="+"         
        class="btn btn-primary rangos-mes-add"
      >
      <table class="rangos_mes_table">
        <tr>
          <th>Dia inicial</th>
          <th>Dia final</th>
          <th></th>
        </tr>
        <!-- no es necesario crear otro componente, basta hacerlo aquí para iterar las filas -->
        <tr v-for="(rango, index) in rangos" :key="index">
          <td>
            <input
              v-model.number="rango.dia_inicial"
              type="number"
              class="rangos_mes_dia"
            >
          </td>
          <td>
            <input             
              v-model.number="rango.dia_final"
              type="number"
              class="rangos_mes_dia"
            >
          </td>
          <td>
            <input 
              @click="del(index)"
              type="button" 
              class="btn btn-danger" 
              value="X"
            >
          </td>
        </tr>
      </table>
      <pre style="background-color: #ccc">
        estado de rangos: {{ rangos }}
      </pre>
    </div>
  `,
  methods: {
    // hace un commit a la mutación DELETE_RANGO de la store enviandole el index a borrar del estado
    del(index) {
      store.commit("DELETE_RANGO", index);
    },
    // hace un commit a la mutación ADD_RANGO de la store para agregar un nuevo rango al estado
    add() {
      store.commit("ADD_RANGO");
    }
  },
  computed: {
    // devuelve el estado en tiempo real con los datos de la store
    rangos() {
      return store.state.rangos;
    }
  }
});

new Vue({
  el: "#app"
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<div id="app">
    <rangos-mes></rangos-mes>
</div>
1
ответ дан 01.12.2019, 22:22

Большое спасибо из-за твоего ответа. Это Vuex даже он стоит мне немного, asГ - что optГ© из-за первого ответа.

В mГ©todo Change компонента ранги - mes-item произвел событие для компонента ранги - месяцы:

change (tipo_dia) {

    switch (tipo_dia) {
        case 'inicial':
            this.$emit('change', tipo_dia, this.id, this.dia_ini);
            break;
        case 'final':
            this.$emit('change', tipo_dia, this.id, this.dia_fin);
            break;
    }
}

И в сдержись компонента ранги - месяцы:

<rangos-mes-item 
    v-for="(rango, index) in rangos" 
    :key="rango.id"
    :dia-inicial="rango.dia_inicial" 
    :dia-final="rango.dia_final"
    :index="index"
    @change="change"
    @delete="del"
></rangos-mes-item>

И в них mГ©todos:

change (tipo_dia, id, value) {
    switch (tipo_dia) {
        case 'inicial':
            this.rangos[id].dia_inicial = parseInt(value);                    
            break;
        case 'final':
            this.rangos[id].dia_final = parseInt(value);
            break;
    }
}
1
ответ дан 01.12.2019, 22:22

Теги

Похожие вопросы