Блог

Главная - Вопросы по программированию - Vuejs получает отредактированные входные данные

Vuejs получает отредактированные входные данные

#javascript #vue.js #vue-component

Вопрос:

Логические

  1. У меня есть флажки с входными данными в качестве метки, значения которых поступают из базы данных, поэтому текст(значение) уже выводится. (готово)
  2. Я хочу составить список проверенных элементов (готово)
  3. Я хочу, чтобы, если я изменил значение элемента, получил измененное значение, но оно все равно дает мне значение базы данных (нужна помощь)

Для лучшего понимания вот несколько скриншотов:

1

один

2

два

PS: Если я изменю ввод перед установкой флажка, мое значение автоматически перейдет к значению по умолчанию (значение БД).

Код

 lt;templategt;  lt;div class="input-group mb-3 active" v-for="(value, key, index) in list" :key="index"gt;  lt;div class="input-group-prepend"gt;  lt;div class="input-group-text"gt;  lt;input type="checkbox" v-model="checkedFiles" :id="index" :value="value" aria-label="Checkbox for following text input" gt;  lt;/divgt;  lt;/divgt;  lt;input type="text" :value="value" :id="index" class="form-control" aria-label="Text input with checkbox"gt;  lt;/divgt;   lt;button class="btn btn-success btn-sm" v-show="isVisible" @click="generate"gt;Generate Listlt;/buttongt; lt;/templategt;  lt;scriptgt;  export default {  name: "directories-component",  data() {  return {  list: [],  checkedFiles: [],  }  },  methods: {  getTheList() {  //....  this.list = res.data.data;  //....  },  generate(e) {  e.preventDefault();  console.log(this.checkedFiles);  }  },  mounted() {  console.log('Component mounted.')  }  } lt;/scriptgt;

Есть какие-нибудь предложения?

Ответ №1:

Использовать v-model для ввода текстового поля

 lt;div class="input-group mb-3 active" v-for="(val, index) in list" :key="index"gt; // removed key from iterator since list is an array  lt;div class="input-group-prepend"gt;  lt;div class="input-group-text"gt;  lt;input type="checkbox" v-model="checkedFiles[index]" :id="index" aria-label="Checkbox for following text input" gt; // removed the :value attribute  lt;/divgt;  lt;/divgt;  lt;input type="text" v-model="list[index]" :id="index" class="form-control" aria-label="Text input with checkbox"gt; // Change added  lt;/divgt;

Комментарии:

1.Привет, спасибо за ответ, но есть 2 проблемы: 1) value больше не существует (в первом вводе :value="value" ) 2) , потому v-model="val" что я получаю 'v-model' directives cannot update the iteration variable 'val' itself.eslint-plugin-vue

2. проверьте отредактированный ответ в lt;input type="checkbox" ........

3. Также я предлагаю вам сохранить другой объект для отслеживания значения флажка, например checkedFiles: [false, false ...]

4. спасибо, но все равно проблема v-model="val" остается

5. хорошо, тогда попробуйте сделать это v-model="list[index]" . Проверьте обновленный ответ

Метки: