Squeak.ru - шаблоны программирования

Проблемы Vue.js с оператором if. Работает очень странно

Я покажу вам свою проблему настолько просто, насколько это возможно:

Использование:

Vue.js, TWIG, iCheck (если это имеет значение).

Поля:

userEditObj.role - ["1","2","3"] это из Vue.js

kid.id - 1 это из TWIG

Проблема:

${ userEditObj.role.indexOf({{ kid.id }}) > 0 ? true : false } - работает хорошо.

Здесь я хочу установить проверенный атрибут моего флажка в зависимости от результата оператора (true или false)

:checked="userEditObj.role.indexOf({{ kid.id }}) > 0 ? true : false" - не работает. Всегда правда.

Также я пытался сделать это:

:checked="userEditObj.role.indexOf({{ kid.id }})" - то же. Всегда правда.

Я слышал, что я не могу использовать усы внутри атрибутов HTML, но я даже не могу найти им замену.

javascript if-statement vue.js twig
17.12.2017

  • не уверен, что это ваша проблема, но вы должны проверять > -1, потому что, если идентификатор находится в индексе 0, вы все равно получите false, когда он находится в массиве. Метод indexOf() возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если он отсутствует 17.12.2017

Ответы:


1

indexOf возвращает -1, когда индекс не найден, поэтому проверка > 0 не будет работать, если то, что вы ищете, является первым элементом в массиве. Вам нужно >= 0.

Использование ? true : false является излишним, так как это то, что >= 0 (и > 0) все равно вернет.

Кроме того, если kid.id === 1, это все равно не сработает, так как 1 является целым числом, а userEditObj.role заполнено строками.

Предполагая, что kid.id является int в twig, вам, вероятно, нужно сделать что-то вроде этого:

:checked="userEditObj.role.indexOf('{{ kid.id }}') >= 0"

Идея состоит в том, чтобы вывести kid.id в виде строки JS, поскольку массив заполнен строковыми переменными.

Вы можете пропустить шаг «stringify», изменив другие части кода.

let role = ["1", "2", "3"];
let kidId = 1;
let kidIdString = "1";
console.log(role.indexOf(kidId)); // fails. returns -1
console.log(role.indexOf(kidIdString)); // found. returns 0

17.12.2017
  • Но проблемы больше нет. Проблема с iCheck lib. Когда я устанавливаю тайм-аут в iCheck init, мои флажки устанавливаются/снимаются правильно. Похоже, iCheck запускается до того, как переменные Vue готовы. iCheck запускается в $(document).ready. 18.12.2017
  • Прохладно. Если вы исправили свой код, изменив что-либо, опубликуйте то, что вы сделали, как ответ на свой вопрос. Для будущих сотрудников Google 18.12.2017

    • 2

    Проблема была с библиотекой iCkeck. Похоже, он не обновляет флажки, которые были изменены входным атрибутом. Мне пришлось уничтожить iCkeck и запустить его снова. В настоящее время работает.

    18.12.2017
    Новые материалы
    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..
    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..
    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...
    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..
    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..
    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..
    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...