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

Как я могу переключать элементы с динамически созданными моделями с помощью v-if?

Я хочу переключить видимость элементов ввода в таблице (таблица Buefy). Это переключение должно быть сделано щелчком флажка.

Данные модели генерируются динамически после вызова API, а затем присваиваются значения (по умолчанию false).

Я также пытался использовать this.nextTick(()=>{}), но это не меняет его. Событие запускается, и console.log также дает значения динамически генерируемых моделей

export default {
    name:'Dashboard',

        data() {
            return {
                maxMatches :{

                },
            }
        },

        mounted(){
            const ctx=this
            this.apiService.getLiveMatches().then(function(response){
                            for (var i=0;i<response.length;i++){
                                ctx.data.push({'sr':i,'match_id':response[i]['match_id'],'match_title':response[i]['short_title'],'match_status':response[i]['status_note'],'start_date':response[i]['date_start'],'type':response[i]['domestic'],'priority':""})

                                // THis is where I am generating models dynamically

                                ctx.maxMatches[response[i]['match_id']]  = false
                            }
                            ctx.matchData = response
                        })

            this.apiService.getDomesticPriorities().then(function(response){
                    ctx.refreshDomesticUi(response)
            })
            this.apiService.getInternationalPriorities().then(function(response){
                    ctx.refreshInternationalUi(response)
            })




        },        

    }



// Template snippet goes here , this is a column of a table where the checkbox and input field resides


<b-table-column field="priority " label="Priority" >
   <div class="selection">
      <b-checkbox  @change.native="checkboxChanged(props.row)" :id="props.row.match_id"    :ref="props.row.type ==0 ? 'int'+props.row.sr+'-check-': 'dom'+props.row.sr+'-check' " ></b-checkbox>
      <b-field    
         :id="props.row.match_id +'b-field'" 
         v-if="maxMatches[props.row.match_id]"
         label="Quantity"
         type="is-danger"
         message="Quantity is invalid">
         <b-numberinput :id="props.row.match_id" ></b-numberinput>
      </b-field>
      <p > is this visible ???</p>
      <!-- <b-checkbox v-for="i in domChecks"   :key="i" :ref="props.row.type ==0 ? 'int'+props.row.sr+'-check-'+i : 'dom'+props.row.sr+'-check'+i " @click.native="checkBoxClick(props.row.type,props.row.sr,i)"></b-checkbox> -->
   </div>
</b-table-column>





09.09.2019

Ответы:


1

Вам нужно использовать Vue.set(член, ключ, значение). Оператор индекса не будет реактивным.

Vue.set(ctx.maxMatches, response[i]['match_id'], false)
09.09.2019
  • Сэр, это сработало. Я бы никогда не смог найти это самостоятельно, я думаю. :П . Большое спасибо . Я потратил на это 3 дня 09.09.2019
  • Мы все были там... Это недостаток Javascript, а не Vue. Золотое правило номер 1: Никогда не используйте [ ] = на реактивном объекте. 09.09.2019

  • 2

    Используйте атрибут v-show для любого элемента, который вы хотите переключить, и данные привязывают его к переменной, которая будет переключать элемент.

    09.09.2019
    Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: 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 и запросов...