The programming language that I am currently using is Vue.
I have some demo code right here:
<template>
<button @click="checkInList">Check</button>
</template>
<script>
import { ref } from "@vue/reactivity";
export default {
name: "App",
setup() {
const firstInput = ref("");
const secondInput = ref("");
const list = ref([
{ name: "lava", kind: "liquid" },
{ name: "air", kind: "gas" },
{ name: "water", kind: "liquid" },
{ name: "earth", kind: "object" },
]);
const checkInList = () => {
if (list.value.includes({ name: "lava", kind: "liquid" })) {
console.log("array includes lava");
// here I want to return the kind of that element, which will be liquid
}
};
return {
firstInput,
secondInput,
checkInList,
};
},
};
</script>
So how can I check if list contains the object with name lava and then return the kind of that object, which will be liquid?
You can use find and return field that you want:
const { ref } = Vue
const app = Vue.createApp({
setup() {
const firstInput = ref("");
const secondInput = ref("");
const list = ref([
{ name: "lava", kind: "liquid" },
{ name: "air", kind: "gas" },
{ name: "water", kind: "liquid" },
{ name: "earth", kind: "object" },
]);
const checkInList = () => {
return list.value.find(l => l.name.includes(firstInput.value)).kind
};
return {
firstInput,
secondInput,
checkInList,
};
},
})
app.mount('#demo')So how can I check if list contains the object with name lava and then return the kind of that object, which will be liquid?<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<button @click="checkInList">Check</button>
<input v-model="firstInput" />
<p>{{ checkInList() }}</p>
</div>