Добавление функциональных флажков в список пользователей в Vue

Question

Добавление функциональных флажков в список пользователей в Vue

1

Я предполагаю, что это общий сценарий, но не найти примеров того, как сделать эту работу в Vue.

Я собираю список пользователей из службы REST и выводя результаты в таблицу. (упрощенное ниже)

  <tr v-for="guser in filteredUsers" class="group_user">
      <td><input type="checkbox" v-bind="guser.checked"></td><td>{{guser.username}</td>
   </tr>

Теперь проблема заключается в том, что проверенный атрибут не является реальным атрибутом для пользовательского объекта, поступающего из базы данных. Поэтому я добавляю его на клиенте после извлечения списка пользователей. Это похоже на правильный подход, потому что бэкэнд-сервис не заботится о "проверке", который используется для функциональности переднего конца.

Однако привязка v-bind = "guser.checked" не работает. Чтение кажется, что это связано с тем, что любой атрибут, связанный с контролем формы, должен быть предварительно определен при объявлении объектов. Но как мне это сделать в динамическом списке N объектов, возвращающихся с сервера?

Пожалуйста, порекомендуйте.

Спасибо

Gotts 14 янв. 2018, в 16:49

Источник

Теги:

javascript

vue.js

vuejs2

1 ответ

Ещё вопросы

Bert · Accepted Answer · 2018-01-14T13-12-00.000Z

Добавьте проверенное свойство в свои пользовательские объекты после их получения через AJAX.

console.clear()

// simulated data from the server
const users = [
  {id: 1, username: "Bob"},
  {id: 1, username: "Mary"},
]

new Vue({
  el: "#app",
  data:{
    users:[]
  },
  computed:{
    filteredUsers(){
      // simulate filtered users
      return this.users
    }
  },
  methods:{
    getUsers(){
      // simulate an ajax call with setTimeout
      setTimeout(() => {
        // iterate over the user objects retrieve from the server
        // and add a checked property. Assign the result to users
        this.users = users.map(u => Object.assign({}, u, {checked: false}))
      }, 250)
    }
  },
  created(){
    this.getUsers()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="guser in filteredUsers" class="group_user">
      <td><input type="checkbox"v-model="guser.checked"></td>
      <td>{{guser.username}}</td>
    </tr>
  </table>
  {{users}}
</div>

Причина, по которой он не работает изначально, заключается в том, что Vue не может обнаруживать свойства, динамически добавленные к объекту после того, как этот объект уже добавлен в Vue. Другим способом справиться с этим было бы использование метода $set для добавления свойства (вместо Object.assign, как в примере).

Именно то, что мне было нужно, спасибо! Я заметил, что вы используете v-модель в флажке. Я бы ожидал использовать V-Bind - но это не сработало. В чем разница?
@Gotts v-bind будет только устанавливать значение ввода, вы должны прослушать событие input , чтобы изменить значение данных Vue. v-model - это стандартный способ сделать оба этих действия одновременно. Как правило, всякий раз, когда у вас есть элемент ввода, вы будете использовать v-model чтобы получить / установить значение ввода. vuejs.org/v2/guide/...
люблю это ... построенный в одностороннем и двустороннем переплете! Спасибо за помощь