VUE-JS - ФЛАЖОК V-МОДЕЛЬ

#json #vue.js #axios #http-post

Вопрос:

введите описание изображения здесь Привет всем новичкам в VUE.JS У меня есть флажки для МОДУЛЕЙ и ФУНКЦИЙ, я хочу вставить функции для каждого МОДУЛЯ, который у меня есть

Вот мой пример кода

 <label> Modules:</label>
          <li v-for="subModule1 in subModules" :key="subModule1.id">
            <input type="checkbox" v-model="dataModules" :value="subModule1" />
            
              {{subModule1}}<br>

[введите описание изображения здесь][1]
{{Подфункция}}

             </div>

1. Это одна из моих ФУНКЦИЙ <div v-for=»Подфункция в подфункциях» :ключ=»subFunction.id»> <div v-для=»Подфункция в подфункциях» :ключ=»subFunction.id»><тип ввода=»флажок» установлен=»ложь» v-модель=»Функции данных» :значение=»subFunction.id» /> {{Подфункция. Функции}} </div>

2. Можете ли вы дать немного больше объяснений по поводу вашей проблемы?

3. пример, сэр, если я установил флажок ДОБАВИТЬ в МОДУЛЕ 1, флажок ДОБАВИТЬ в МОДУЛЕ 2 не будет установлен В моих ситуациях, флажок ДОБАВИТЬ в МОДУЛЕ 1, если я установил флажок Как в МОДУЛЕ 1, так и в МОДУЛЕ 2, ФЛАЖОК ДОБАВИТЬ установлен

4. итак,у вас есть,скажем,список модулей [A,B,C,D, E,F], и у каждого из этих модулей есть список sob, например [Aa, Ab], [Ba, Bb], так что прямо сейчас проблема в том, что если вы проверите Aa, он проверит, что Ba прав

5. Модуль 1 [A, B, C] Модуль 2 [A, B, C]

Ответ №1:

Одна вещь, которую вы могли бы сделать, — это создать компонент, подобный приведенному ниже, я не уверен, что это будет идеальное решение, но, по крайней мере, оно должно работать

 <template>
   <div>
      <div v-for="module in modules" :key="module.text">
        <h3>{{module.text}}</h3>
        <ul>
            <li 
                v-for="subModule in module.subModules" 
                :key="subModule.text"
            >
               {{subModule.text}}
               <input type="checkbox" v-model="subModule.value"/>
            </li>
        </ul>
      </div>
   </div>
</template>

<script>
export default {
   name: 'Example',
   data(){
      return {
           modules:[
               {
                    text:"Module 1",
                    subModules:[
                        {
                            text:"1-A",
                            value:false,
                        },
                        {
                            text:"1-b",
                            value:false,
                        }
                    ]
                },
                {
                    text:"Module 2",
                    subModules:[
                        {
                            text:"2-A",
                            value:false,
                        },
                        {
                            text:"2-b",
                            value:false,
                        }
                    ]
                }
            ]
        }
    }
}
</script>

С помощью этого вы связываете ключ массива с текстом, но вы можете изменить его на что-то другое, и если вы хотите добавить новый модуль или подмодуль, просто добавьте его в массив, и он должен быть добавлен в пользовательский интерфейс
Если модуль не выбирает новые добавленные элементы, вы что-то вроде глубокого копирования и присваиваете модулю новый массив