R
R
r_g_b_a2020-05-18 03:02:49
Vue.js
r_g_b_a, 2020-05-18 03:02:49

How to set the visibility of elements?

Hello. In an answer to a previous question, I was given advice on how to generate a form.

In data, create an array of objects, each of which will have a label, type, value.
And output them with a v-for loop.
v-model cling to value.
And by type you can display different fields. For example v-if="item.type === 'text'", then output text input.
v-if="item.type === 'select'", then select. And in the same object you can store options.

If I understand correctly, the data object will be something like this https://jsfiddle.net/p5h4kza9/ But there was a difficulty in setting the conditions under which certain elements will be displayed. For example, in this example, how to make the text 1 field be displayed only when radio 1 is selected , and section 2 when radio 2 is selected ?
I could write v-if="demo[0].items[0].data === 'radio 1'", but the data can change, as well as the index of the desired array cell, which will lead to unexpected results.
It is also desirable to keep the data structure , since then you will need to display the form data on the page along with the section headers in something like this
Текстовые поля
input 1 - тут значение value

Текстовые области
textarea 5 - тут значение value

Чекбокс
checkbox 3 - тут значение value

(link to my previous question) , otherwise it will not be difficult to get them. Or give advice if you can do better.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question