Обработка флажков в VueJS

Question

Обработка флажков в VueJS

Поскольку элемент, который вы хотите вставить, представляет собой массив, а array_splice принимает массив элементов, помещает ваш массив в массив.

Также, поскольку вы хотите вставить что-то перед последним элементом, вы может использовать отрицательное число для смещения, чтобы считать назад от конца. (Эффект тот же, что и у ваших данных, но имеет значение для массивов разных размеров.)

array_splice(
    $tpl['breadcrumbs'],
    -1,
    0,
    [[ 'title' => $category->category->name, 'text' => $category->category->name, 'url' => SITE_DOMAIN.ADMIN_PATH.'/items/' ]]
);

-1

vue.js javascript

задан marc_s 20 January 2019 в 20:48

1 ответ

Другие вопросы по тегам:

vue.js javascript

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

score 0 · Answer 1

Как это часто бывает у новых пользователей инфраструктуры SPA, вы делаете это в точности наоборот. Вам нужно избавиться от привычки прикасаться к DOM напрямую при использовании Vue - вместо того, чтобы думать в терминах «у меня есть эти флажки, мне нужно читать значения из них», это должно быть «У меня есть эти переменные состояния в моем компоненте, и vue будет автоматически отражать эти значения внутри DOM. " Управляйте компонентом data и позвольте Вью позаботиться о DOM.

Так, например, вместо использования jQuery для поиска в DOM элементов флажков и чтения / записи по их атрибутам, используйте Vue для хранения этих значений и дайте своему шаблону нарисовать их в DOM, как в этом упрощенный пример:

new Vue({
  el: '#app',
  data: {
    myCheckboxes: [{
        val: 11172,
        username: 'junaid@evercam.io',
        apiId: 'dddd',
        apiKey: 'xxxx',
        checked: false
      },
      {
        val: 123,
        username: 'foo@example.com',
        apiId: 'dddd',
        apiKey: 'xxxx',
        checked: true
      },
      {
        val: 456,
        username: 'bar@example.com',
        apiId: 'dddd',
        apiKey: 'xxxx',
        checked: true
      }
    ]
  },
  methods: {
    onModifyClick() {
      // Examine the data, not the DOM:
      var ret = this.myCheckboxes.map(x => {
        if (x.checked) return x.val
      }).filter(x => {return x})
      console.log("Values of checked items: ", ret)
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <template v-for="box in myCheckboxes">
    <input @change="onModifyClick()" type="checkbox" v-model="box.checked" :data-val="box.val" :data-val-username="box.username" :data-val-api-id="box.apiId" :data-val-api_key="box.apiKey"> {{box.username}}<br>
</template>
</div>

Как вы можете видеть, большинство из того, что вы пытались сделать вручную с помощью jQuery сейчас происходит автоматически - в любое время вы можете просто проверить содержимое компонента data, чтобы увидеть состояние списка «myCheckboxes», вы никогда ничего не читаете из DOM и никогда не пишете непосредственно в DOM, просто измените содержимое data, и пусть Vue обрабатывает все остальное.

В таких средах, как Vue, React или Angular, DOM является побочным эффектом, а не источником истины, как вы привыкли в коде jQuery. Я бы настоятельно рекомендовал не использовать jQuery вместе с Vue, по крайней мере до тех пор, пока вы не поймете структуру достаточно хорошо, чтобы знать, когда это безопасно и необходимо сделать это (не часто).