Каким образом можно задать значение "checked" в зависимости от входящих данных?

Question

Григор

vue

Каким образом можно задать значение "checked" в зависимости от входящих данных?

Как установить атрибут "checked" в зависимости от значения "favorites" для каждого элемента в цикле v-for во Vue.js? 

<div v-for="method in methodsType">
    <div v-if="method.category_id === id">
        <input id="name" type="checkbox" role="switch"
             v-model="methodId"
             v-bind:value="method.id"
             v-bind:checked="method.favorites === 1"
             class="form-check-input">
         <label for="name" class="form-check-label">{{ method.name_method }}</label>      
      </div>
</div>

export default {
    name: "IndexComponent",
    data() {
        return {
            methodsType: null,
            methodId: [],
            id: 1,
        }
    },
    mounted() {
        this.getMethods()
    },
    methods: {
        getMethods() {
            axios.get('/api/method/favorites/')
                .then(res => {
                    this.methodsType = res.data.methods;
                })
        },
},
}

18 сентября 2023 г. 11:57

Ответы на вопрос 2

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

Answer 1

В вашем коде уже используется привязка к атрибуту `checked` с помощью директивы `v-bind:checked`. В данном случае, значение атрибута `checked` будет зависеть от значения `favorites` для каждого элемента в цикле `v-for`.

Основная проблема может возникнуть, если тип данных `method.favorites` отличается от числа `1`. Возможно, вам потребуется преобразовать тип данных или сравнивать с другим значением, в зависимости от ваших требований.

Если вы хотите задать значение `checked` в зависимости от значения `favorites` с использованием выражения, вы можете использовать следующий синтаксис:

```html
<input id="name" type="checkbox" role="switch"
     v-model="methodId"
     v-bind:value="method.id"
     :checked="method.favorites === 1"
     class="form-check-input">
```

В этом случае, если значение `method.favorites` равно `1`, атрибут `checked` будет установлен. В противном случае, атрибут будет отсутствовать или иметь значение `false`.

Если значение `method.favorites` не является числом, вы можете использовать другие условия для проверки и установки атрибута `checked`. Например, вы можете проверить, является ли значение `true` или `false`:

```html
<input id="name" type="checkbox" role="switch"
     v-model="methodId"
     v-bind:value="method.id"
     :checked="method.favorites"
     class="form-check-input">
```

Здесь, если `method.favorites` имеет значение `true`, атрибут `checked` будет установлен. Если значение является `false` или любым другим, атрибут `checked` будет отсутствовать или иметь значение `false`.

Answer 2

() => ({
  methods: {},
  categoryId: 1,
}),

created() {
  axios.get('/api/method/favorites/').then(({ data: { methods } }) => {
    this.methods = methods.reduce((acc, n) => (
      (acc[n.category_id] ??= []).push(n),
      acc
    ), {});
  });
},


  
    
    {{ n.name_method }}