Как я могу нацелить элементы в ячейке таблицы, используя vuejs? - PullRequest
Новая
       10

Как я могу нацелить элементы в ячейке таблицы, используя vuejs?

1 голос
/ 27 октября 2019

У меня есть таблица, которая динамически отображается с данными в поле ввода только для чтения в каждой ячейке. В первой ячейке есть кнопка редактирования. Когда пользователь нажимает кнопку «Изменить», поля ввода только для чтения должны быть отключены, чтобы данные можно было вводить в каждую ячейку. Кнопка редактирования должна быть скрыта, а кнопка сохранения должна отображаться. Когда пользователь нажимает кнопку «Сохранить», он должен вызвать метод, который может использовать данные (сохранить в базе данных или что-то в этом роде).

Я думал, что смогу использовать событие и перейти к цели, но это массив, и яЯ не уверен, что делать. Есть идеи? 

<div id="app">
<table border=1 width=100%>
  <tr>
    <td width=10px>EDIT</td>
    <td>Program</td>
    <td>Company</td>
    <td>Funding</td>
    <td>Funded</td>
    <td>Recruit</td>
  </tr>
  <tr v-for="program in programs">
    <td><button class="show" v-on:click="editItem($event)">edit</button>&nbsp;<button class="hide">save</button></td>    
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.program"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.company"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funding"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funded"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.Recruit"></td>
  </tr>
</table>
</div>

new Vue({
  el:"#app",
  data() {
    return {
      test:"hello",
      programs:"",
      hide:true
    }
  },
  created: function(){
    this.getPrograms();
  },
  mounted: function(){

  },
  methods: {
    getPrograms: function(){
     axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
        this.programs = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    editItem: function(e){     
      console.log(e)
       //console.log(e.target.parentElement.parentNode.parentElement.HTMLCollection) doesn't work
      alert("Make line item editable for editing and then saving")
    }
  }
})

Вот ручка для справки

Ответы [ 4 ]

4 голосов
/ 27 октября 2019

i forked ваша ручка здесь или попробуйте это так: 

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

new Vue({
  el:"#app",  
  filters: {
    toCapitalize (text) {
      return text.charAt(0).toUpperCase() + text.slice(1)
    }
  },  
  data () {
    return {
      columns: [
        'program', 'company', 'funding', 'funded', 'Recruit'
      ],
      programs: []
    }
  },
  created () {
    this.getPrograms()
  },
  methods: {
    getPrograms () {
      axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs")
        .then(response =>
          // adding prop isEditable for each object    
          this.programs = response.data.map(program => ({ isEditable: false, ...program }))
        )
        .catch(error => console.log(error))
    },
    // using index of the current program to toggle the property isEditable
    editItem (index) {
      this.programs[index].isEditable = !this.programs[index].isEditable
    }
  }
})
.editable {
  border: 2px solid green
}
.button-action {
  min-width: 3rem
}
input {
  width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

<div id="app">
  <table border=1 width=100%>
    <tr>
      <td width=10px>EDIT</td>
      <td v-for="(column, indexColumn) in columns" :key="indexColumn">
        {{ column | toCapitalize }}
      </td>
    </tr>
    <tr v-for="(program, indexProgram) in programs" :key="indexProgram">
      <td>
        <button 
          @click="editItem(indexProgram)"
          class="button-action"
        >
          {{ program.isEditable ? 'save' : 'edit' }}
        </button>
      </td>    
      <td v-for="(column, indexColumn) in columns" :key="indexColumn">
        <input        
          v-model="program[column]"
          :readonly="!program.isEditable"
          :class="{ 'editable': program.isEditable }"
        >
      </td>
    </tr>
  </table>
</div>
1 голос
/ 27 октября 2019

Имейте свойство отслеживать, какая строка программы редактируется.
Это можно сделать с помощью уже имеющегося свойства program.id

editingId vmсвойство указывает, какая «программа» редактируется. Если для свойства установлено значение, отличное от нуля, атрибут readonly будет false, а кнопка будет переключаться с edit на save. Если для свойства editingId установлено значение null, таблица возвращается в обычный режим просмотра.

Я реализовал saveItem v-on: щелчок обратным вызовом для кнопки save только для того, чтобы установить для свойства editingId значение null, чтобы полностью проиллюстрировать, как оно работает. Вы можете определить обратный вызов по своему усмотрению, но не забудьте установить для свойства editingId значение null, чтобы выйти из режима редактирования.

Вот отредактированное перо

1 голос
/ 27 октября 2019

При получении списка программ добавьте дополнительное свойство, которое будет указывать, находится ли строка в режиме редактирования: 

axios.get(url).then (response => {
    this.programs = response.data.map(item => {
        ...item,
        isEditing: false
    })
})

Также программы должны быть инициализированы в пустой массив вместо пустой строки.

В методе editItem вместо объекта события вы передадите ссылку на элемент, а затем установите для isEditing значение true 

editItem(item) {
    item.isEditing = true
}

Затем вы можете создать метод, который будет извлекать, если ввод строки находится в режиме только для чтения: 

isReadOnly(item) {
    return item.isEditing ? false : "readonly";
}

Затем привяжите этот метод к атрибуту только для чтения 

<input type="text" :readonly="isReadOnly(item)" />

Избегайте использования ссылок на узлы и попытайтесь решить проблему с привязкой. Например, вы можете привязать заголовок кнопки к методу и вернуть значение «Сохранить» или «Изменить» в зависимости от состояния isEditing.

0 голосов
/ 27 октября 2019

Добавление атрибута только для чтения к элементам в массиве. После нажатия кнопки редактирования установите атрибут readonly элементов в массиве в значение false.

...