Блог

Главная - Вопросы по программированию - Отображать элемент div, если определенное значение существует в объекте JSON в JavaScript Vue Js

Отображать элемент div, если определенное значение существует в объекте JSON в JavaScript Vue Js

#javascript #json #vue.js #vuetify.js

#javascript #json #vue.js #vuetify.js

Вопрос:

Мне нужно отобразить элемент Div, если в объекте JSON существует определенное значение, и я попытался использовать array, я мог бы добиться успеха, но я не знаю, как это сделать в объекте JSON. Просто мне нужно отобразить div, если значение с именем «Канал» существует в объекте JSON.

Ниже приведен код, который я пробовал, но он не сработал

 activationTypes: [
{
"activationTypeId": 1,
"name": "SMS"
},
{
"activationTypeId": 2,
"name": "WEB"
},
{
"activationTypeId": 3,
"name": "Channel"
}
]

<div v-show="Object.values(activationTypes).includes('Channel')"> 
<p>test<test>
</div>

Комментарии:

1. нет «объекта JSON»… это просто массив объектов, с которыми вы имеете дело, исправление этой мысли может помочь вам на самом деле попытаться решить вашу собственную проблему… Object.values(activationTypes) это массив объектов, вам нужно проверить, имеет ли один из этих объектов свойство name со значением Channel

Ответ №1:

Простая проверка:

 activationTypes.some( item => item['name'] === 'Channel' );

Ссылка:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

Комментарии:

1. вы опередили меня на несколько секунд 🙂

2. @nizantz ты перепутал с лучшим

Ответ №2:

Используйте .find для поиска элемента по имени:

 new Vue({
     el:"#app",
     data(){
          return{
               activationTypes: [
                    {
                    "activationTypeId": 1,
                    "name": "SMS"
                    },
                    {
                    "activationTypeId": 2,
                    "name": "WEB"
                     },
                     {
                     "activationTypeId": 3,
                     "name": "Channel"
                      }
                ]
           }
     }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <div v-show="activationTypes.find(e=>e.name=='Channel')"> 
          <p>test</p>
     </div>
</div>