-1

У меня есть массив и форма. При клике на кнопку создания внутри родительского компонента и на кнопку редактирования внутри компонента со списком, у меня динамически должна появляться форма. Логика такая, если хочу добавить новое имя, id соответственно равняется null, если id !== null, то поле редактируется. Как "скормить" моей форме элемент массива, чтобы уже исходя из данных, что id = null или id !==null, я мог отображать форму с нужным лейблом?

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

const MyForm = {
  template: `<form v-if="nameIsCreate || nameIsEdit">
    <input id="form"
      type="text" 
      :value="name"
      @input="$emit('input', $event)"
      @keyup.enter="save()" 
    />
    <label for="form" v-if="nameIsCreate">создать имя</label>
    <label v-if="nameIsEdit" for="form">изменить имя</label>
  </form>`,
  name: 'my-form',
  model: {
    prop: "name"
  },
  props: ['nameIsCreate', 'nameIsEdit'],
  methods: {
    save: function() {
      this.$emit("save");
    }
  }
};

const MyList = {
  template: `
  <div>
    <span>{{personName.name}}</span>
    <button  @click="nameEdited()">edit</button>
  </div>`,
  name: 'my-list',
  props: {
    personName: {
      type: Object,
    }
  },
  methods: {
    nameEdited: function(id) {
      this.$emit('nameEdited', id)
    },
  }
};

const App = {
    template: `
  <div>
  <button @click="createFormOpened()">create</button>
  <my-form 
    @save="saveName" 
    v-model="name" 
    :nameIsEdit="nameIsEdit" 
    :nameIsCreate="nameIsCreate"
  />
  <my-list 
    v-for="personName in persons"
    :key="personName.id" 
    :personName="personName" 
    @nameEdited="editFormOpened()"
  /> 
  </div>
  `,
    components: {
      'my-form': MyForm,
      'my-list': MyList
    },
    data() {
      return {
        nameIsEdit: false,
        nameIsCreate: false,
        name: '',
        person: {
          id: null, 
          name: ''
        },
        persons: [{
          id: 0,
          name: 'Ivan'
        },  {
          id: 1,
          name: 'Alex'
        }, {
          id: 2,
          name: 'John'
        }, ]
      }
    },
    methods: {
      saveName() {
        if (this.persons.id === null) { 
          this.person = {
          name: ''
          }
        this.persons.push(this.person)
        } else {
        this.persons = this.persons.find(item => item.id === id)
        let index = this.persons.findIndex(item => item.id === person.id)
        this.persons.splice(index, 1, person)
        }
      },
      editFormOpened() {
        this.name = '';
        this.nameIsCreatenameIsEdit = false;
        this.nameIsEdit = !this.nameIsEdit;
      },
      createFormOpened: function() {
        this.name = '';
        this.nameIsEdit = false;
        this.nameIsCreate = !this.nameIsCreate;
      },
    }};

    new Vue({
      el: '#app',
      components: {
        App
      },
      template: `<app></app>`
    })
<div id="app" v-cloak></div>

<script src='https://cdn.jsdelivr.net/npm/vue@2.6.10'></script>

8
  • В коде масса синтаксических и логических ошибок (перечислять не буду, см. консоль после добавления div#app) - перед тем как решать задачу передачи массива, стоит сначала исправить их.
    – yar85
    26 дек 2019 в 12:19
  • @yar85 я вроде подправил, но ошибка все равно одна есть. Ссылается на определенную строку, а у меня такой даже нет...позже понял в чем проблема, сейчас дело уже в другом. Не прогружаются компоненты..С чем это может быть связано, не подскажешь?
    – Ivan Navi
    27 дек 2019 в 3:41
  • Скобка где-то не закрыта (а может и не одна). Я тоже пытался пофиксить этот код, но с планшетника неудобно и медленно: за полчаса возни не разгреб все ошибки, после чего и написал предыдущий коммент... А по тексту вопроса логика алгоритма не очень понятна :/ (например, зачем передавать именно массив и именно через событие, если можно этот массив через props забиндить дочернему компоненту из родительского, и индекс элемента тоже).
    – yar85
    27 дек 2019 в 3:47
  • @yar85 скобки перепроверил уже несколько раз...Не прогружаются компоненты все равно. Я и хочу избавиться от перменных nameIsCreateи nameIsEdit и выводить лейбл уже относительно айдишника. Передавал через props..Возможно внутри компонента дочернего, куда прокинул объект (массив, действительно, целиком прокидывать нет смысла), просто неправильно обращаюсь к свойству, но и ошибок нет, и выводит 2 лейбла одновременно
    – Ivan Navi
    27 дек 2019 в 3:57
  • @yar85 заменил camelCase- именование внутри Арр на snake-case и компоненты заработали
    – Ivan Navi
    27 дек 2019 в 3:59

1 ответ 1

2

const LabeledEdit = {
  template: `
    <div class="labeled-edit">
      <label>
        <span class="label">{{ label }}</span>
        <input autofocus ref="input" v-model="value"
          @input="$emit('input', $event)" @keyup.enter="applyInput" 
        />
      </label>
    </div>
  `,
  data: () => ({
    value: ''
  }),
  props: {
    data: Object,
    valueKey: String, 
    label: String
  },
  methods: {
    applyInput(e) {
      const newData = { ...this.data, [this.valueKey]: this.value };
      this.$emit('save', newData);
    }
  },
  mounted() {
    this.value = this.data[this.valueKey];
    this.$refs.input.focus();
  },
  name: 'LabeledEdit'
};

const MyList = {
  template: `
    <div class="my-list">
      <div class="row" v-for="person in persons" :key="person.id">
        <span class="pid">{{ person.id + '.' }}</span>
        <labeled-edit v-if="person === personForEdit"
          :data="person" valueKey="name"
          @save="changePersonData(person, $event)"
        ></labeled-edit>
        <template v-else>
          <span class="name">{{ person.name }}</span>
          <button @click="personForEdit = person">Edit</button>
        </template>
      </div>
    </div>
  `,
  data: () => ({
    personForEdit: null
  }),
  props: {
    persons: { type: Array }
  },
  methods: {
    changePersonData(person, changedPerson) {
      const personIdx = this.persons.findIndex(p => p.id === person.id);
      if (personIdx < 0)
        throw new Error('No person found for changePersonName');
      this.persons.splice(personIdx, 1, { ...changedPerson });
      this.personForEdit = null;
    },
  },
  components: { LabeledEdit },
  name: 'MyList'
};

const App = {
  template: `
    <div class="app">
      <div class="row create">
        <labeled-edit v-if="showEdit"
          :data="newPerson" valueKey="name" label="Создать:"
          @save="addPerson"
        ></labeled-edit>
        <button v-else class="btn-create" @click="createPerson">Create</button>
      </div>
      <hr>
      <my-list :persons="persons"></my-list>
    </div>
  `,
  data: () => ({
    showEdit: false,
    newPerson: null,
    persons: [
      { id: 0, name: 'Ivan' },
      { id: 1, name: 'Alex' },
      { id: 2, name: 'John' }
    ]
  }),
  methods: {
    createPerson() {
      const lastId = this.persons.reduce((r, p) => r = Math.max(r, p.id), -1);
      this.newPerson = { id: lastId + 1, name: '' };
      this.showEdit = true;
    },
    addPerson(person) {
      this.persons.push({ ...person });
      this.showEdit = false;
    }
  },
  components: { MyList, LabeledEdit },
  name: 'App'
};

new Vue({
  el: '#app',
  components: { App },
  template: `<app></app>`
});
body, input { font: 1rem sans-serif; }
hr { padding: 0; border: none; border-bottom: 1px solid #ccc; }

.app { max-width: 300px; }
  .app * { box-sizing: border-box; }
 
.labeled-edit,
.labeled-edit input { width: 100%; }
.row.create .labeled-edit input { width: auto; }

.btn-create { margin: 0.1rem 0 0.1rem 1rem; }

.my-list { width: 100%; }
  .my-list .row { display: flex; align-content: center; padding: 0.4rem 1rem; }
  .my-list .row:nth-child(even) { background: #eee7; }
    .my-list .labeled-edit { margin-left: -2px; }
    .my-list button { flex: 0 0 auto; }
    .my-list .pid   { flex: 0 0 auto; margin: 3px 0.5em 3px 0; color: #aaa; }
    .my-list .name  { flex: 1 0 auto; margin: 3px 0; }
<div id="app" v-cloak></div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>


С использованием одного компонента ввода - и для создания, и для редактирования:

const LabeledEdit = {
  template: `
    <div class="labeled-edit">
      <label>
        <span class="label">{{ label }}</span>
        <input autofocus ref="input" v-model="value"
          @input="$emit('input', $event)" @keyup.enter="applyInput" 
        />
      </label>
    </div>
  `,
  data: () => ({
    value: ''
  }),
  props: {
    data: Object,
    valueKey: String, 
    label: String
  },
  methods: {
    applyInput(e) {
      const newData = { ...this.data, [this.valueKey]: this.value };
      this.$emit('save', newData);
    }
  },
  mounted() {
    this.value = this.data[this.valueKey];
    this.$refs.input.focus();
  },
  name: 'LabeledEdit'
};

const MyList = {
  template: `
    <div class="my-list">
      <div class="row" v-for="person in persons" :key="person.id">
        <span class="pid">{{ person.id + '.' }}</span>
        <span class="name">{{ person.name }}</span>
        <button @click="$emit('edit', person)">Edit</button>
      </div>
    </div>
  `,
  props: {
    persons: { type: Array }
  },
  components: { LabeledEdit },
  name: 'MyList'
};

const App = {
  template: `
    <div class="app">
      <div class="row create">
        <labeled-edit v-if="showEdit"
          :data="personData" valueKey="name"
          :label="creatingPerson ? 'Создать:' : 'Изменить:'"
          @save="applyChanges"
        ></labeled-edit>
        <button v-else class="btn-create" @click="createPerson">Create</button>
      </div>
      <hr>
      <my-list :persons="persons" @edit="editPerson"></my-list>
    </div>
  `,
  data: () => ({
    showEdit: false,
    personData: null,
    creatingPerson: false, 
    persons: [
      { id: 0, name: 'Ivan' },
      { id: 1, name: 'Alex' },
      { id: 2, name: 'John' }
    ]
  }),
  methods: {
    createPerson() {
      this.creatingPerson = true; 
      const lastId = this.persons.reduce((r, p) => r = Math.max(r, p.id), -1);
      this.personData = { id: lastId + 1, name: '' };
      this.showEdit = true;
    },
    editPerson(person) {
      this.creatingPerson = false; 
      this.personData = person;
      this.showEdit = true;
    },
    applyChanges(person) {
      if (!this.creatingPerson) {
        const idx = this.persons.findIndex(p => p.id === person.id); 
        this.$set(this.persons, idx, { ...person }); 
      } else {
        this.persons.push({ ...person });
      }
      this.showEdit = false;
    }
  },
  components: { MyList, LabeledEdit },
  name: 'App'
};

new Vue({
  el: '#app',
  components: { App },
  template: `<app></app>`
});
body, input { font: 1rem sans-serif; }
hr { padding: 0; border: none; border-bottom: 1px solid #ccc; }

.app { max-width: 300px; }
  .app * { box-sizing: border-box; }
 
.labeled-edit { width: 100%; }
  .labeled-edit label { display: flex; flex-flow: row nowrap; align-content: center; }
    .labeled-edit span  { line-height: 1.6em; }
    .labeled-edit input { flex: 1 1 auto; min-width: 0; margin-left: 0.2em; }

.btn-create { margin: 0.1rem 0 0.1rem 1rem; }

.my-list { width: 100%; }
  .my-list .row { display: flex; align-content: center; padding: 0.4rem 1rem; }
  .my-list .row:nth-child(even) { background: #eee7; }
    .my-list button { flex: 0 0 auto; }
    .my-list .pid   { flex: 0 0 auto; margin: 3px 0.5em 3px 0; color: #aaa; }
    .my-list .name  { flex: 1 0 auto; margin: 3px 0; }
<div id="app" v-cloak></div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

2
  • То, что нужно! Спасибо за потраченное время на развернутый ответ к моему вопросу
    – Ivan Navi
    5 янв 2020 в 10:37
  • @IvanNavi, Пожалуйста. Нюанс: у второго варианта не учтена ситуация нажатия "Edit" при активном редактировании... если кнопки не будут блокироваться, то вместо присвоения в mounted, можно связать name из объекта в props со свойством элемента через бинд вычисляемого свойства (возвращающего name) - так значение инпута будет обновляться реактивно.
    – yar85
    5 янв 2020 в 12:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.