Check if the content key Json exists by implementing Vue

Can anyone help me with checking the existence of "novalue"? For instance:

{
    name: "maria",
    city_id: "novalue"
    ....
}

What would be the best way to do this in Vue? Should I use <div v-if="condition"> or a function?

Answer №1

If you are interested in utilizing ES7 features:

const checkKey = (obj, key ) => Object.keys(obj).includes(key);

Here is an example of how it can be implemented:

const myObject = {name: 'John', age: 30};

const hasName = checkKey(myObject, 'name');
const hasGender = checkKey(myObject, 'gender');

console.log(hasName, hasGender); // true, false

For Vue.js users:

Component:

{
    methods: {
        checkKey(obj, key ) {
            return Object.keys(obj).includes(key);
        }
    },
    computed: {
        hasName() {
            return this.checkKey(this.someData, 'name');
        }
    }
}

Template:

<div v-if="hasName"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inconsistencies in grunt-ng-constant target operations

I encountered a strange issue with grunt-ng-constant where only 2 out of the 3 targets are working. Here is how my configuration is set up: grunt.initConfig({ ngconstant: { options: { space: ' ', wrap: '"use strict";&bso ...

In AngularJS, I was attempting to display array indexes in reverse order. Can anyone provide guidance on how to achieve this?

<tr ng-repeat="qualityalert in qualityalerts" current="$parent.start;$parent.start=$parent.start+(qualityalerts.length);"> <td class="v-middle">{{current + $index}}</td> </tr> Important: I was talking about this specific code snipp ...

Observing the state of a variable within a directive using a service from a different module

I currently have two modules named "core" and "ui". The "ui" module has a dependency on the "core" module. Below is the code for my core.js file: var core = angular.module('core', [ 'ngRoute' ]); // Services core.service('httpI ...

Exploring the Wonders of React Memo

I recently started delving into the world of React. One interesting observation I've made is that when interacting with componentized buttons, clicking on one button triggers a re-render of all button components, as well as the parent component. impo ...

Implementing SweetAlert2 in Vue.js to create a modal prompt for confirmation prior to deleting an item

I'm encountering an issue with sweetalert2 while using Laravel Vue for my app development. My goal is to have a confirmation modal pop-up when deleting a row from the database. However, whenever I click "Yes", the item is successfully removed. But if ...

What sets my project apart from the rest that makes TypeScript definition files unnecessary?

Utilizing .js libraries in my .ts project works seamlessly, with no issues arising. I have not utilized any *.d.ts files in my project at all. Could someone please explain how this functionality is achievable? ...

Using VueJs to invoke a plugin from a .js file

I'm seeking a deeper understanding of working with vueJS. My current setup In my Login.vue component, there is a function logUser() from UserActions.js which in turn calls the postRequest() function from AxiosFacade.js Additionally, I use a plugin ...

Interested in integrating Mockjax with QUnit for testing?

I recently came across this example in the Mockjax documentation: $.mockjax({ url: "/rest", data: function ( json ) { assert.deepEqual( JSON.parse(json), expected ); // QUnit example. return true; } }); However, I'm a bit confused abou ...

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

Replicating a tag and inputting the field content

Scenario: An issue arises with copying a label text and input field as one unit, instead of just the text. Solution Needed: Develop a method to copy both the text and the input field simultaneously by selecting the entire line. Challenge Encountered: Pre ...

When the status is set to "Playing," the Discord Audio Player remains silent

So, I'm in the process of updating my Discord audio bot after Discord made changes to their bot API. Despite my best efforts, the bot is not producing any sound. Here's a snippet of the code that is causing trouble: const client = new Discord.Cl ...

Utilizing JavaScript and jQuery to make a query to mySQL

Looking to solve a SQL database query challenge using JavaScript or jQuery? Here's the scenario: I have a SQL db and typically use the following query to retrieve data based on distance from specified coordinates: SELECT id, ( 3959 * acos( cos( rad ...

No content appears on the multi-form component in React

After several attempts at building a multi-step form in React, I initially created a convoluted version using React.Component with numerous condition tests to determine which form to display. Unsatisfied with this approach, I decided to refactor the code f ...

Eslint is unable to resolve issues within vue.js code

My first step was creating a vue project. npm init vue@latest Here are the settings I used. Next, I added rules to the .eslintrc.cjs file. /* eslint-env node */ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { r ...

Is it beneficial to display three.js on a <canvas> rather than a <div>?

I have come across examples in three.js that use: renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } ); This relates to a <canvas></canvas> element. On the contrary, there is another method: rendere ...

The output from the console displays a variety of numbers (11321144241322243122)

Every time I attempt to log the number 11321144241322243122 into the console, it consistently converts to a different number 11321144241322244000. This issue persists both in node.js and the browser console. ...

Obtain the details of a selected item in a list by tapping on it using Natives

I am wondering how to retrieve the context of a tapped item in a listview. For example, if there are three items in the list, how can I determine that the second item was clicked and access the data related to that item in the observable array? For instan ...

What is the best way to create hover effects on buttons in Vue.js 3?

I'm currently developing a calculator to practice my Vue.js 3 skills (I am new to vue). I've successfully implemented the basic features, but now I'm exploring how to incorporate hover animations on the buttons. Specifically, I want to diffe ...

Evaluating the conditional rendering of a React child component using Jest and Enzyme

I am currently working on expanding the test coverage for this particular file: import React, { useContext } from 'react'; import UserContext from '../../contexts/user'; import styles from './index-styles.scss'; const UserLog ...