I'm new to Vue JS and I'm trying to pass an HTML table using this array, I have a dropdown where I select the option I want and then it shows it, but I can't figure out how can I put HTML in there, when I do it prints code instead. A little help would be greatly appreciated.
This is the HTML file:
<div id="app">
<div>
{{pickedValue}}
</div>
<picker v-model="pickedValue"></picker>
</div>
This is the JS file and I want to put an HTML table inside list:["c","d","e"]
console.clear()
Vue.component("picker",{
props:["value"],
data(){
return {
list:["c","d","e"],
currentValue: this.value,
selectedValue: ""
}
},
template:`
<div>
<select #change="currentValue = $event.target.value" v-model="selectedValue">
<option value="">Select</option>
<option v-for="item in list" :value="item" :key="item">{{item}}</option>
</select>
</div>
`,
watch:{
currentValue(newValue){
if (!this.list.includes(newValue))
this.selectedValue = ""
this.$emit('input', newValue)
}
}
})
new Vue({
el:"#app",
data:{
pickedValue: null
}
})
You should use v-html instead. Be careful when using this because if "c", "d", "e" are user inputs, it could expose your application to XSS attacks:
<div id="app">
<div v-html="pickedValue"></div>
<picker v-model="pickedValue"></picker>
</div>
https://v2.vuejs.org/v2/api/#v-html
Related
I have a child component and a father component. in the child component, i have a boolean props with a false default value. I call the component child in the parent component and when i set my child component by computed function which returns a boolean value, i got an error.
child component
<template>
<div v-if="fruitDisplay">
<span >{{ fruitName }}</span>
</div>
</template>
<script>
export default {
name: "childComponent",
props: {
fruitDisplay: {
type: Boolean,
default: false
}
},
data() {
return {
fruitName: 'fruit selected !!!!'
}
}
}
</script>
<style scoped>
</style>
parent component
<template>
<div id="selector">
<div v-model="selected" v-for="(item, key) in fruitList" :value="key">
<child-component :fruitDisplay='getCoconut(item)'></child-component>
</div>
</div>
<br>
<br>
<span>Selected: {{ selected }}</span>
</div>
</template>
<script>
export default {
name: "ParentComponent",
data() {
return {
selected: '',
fruitList: {
"fruit1": "Apple",
"fruit2": "Banana",
"fruit3": "Coconut"
}
}
},
computed: {
getCoconut(item) {
return item === 'Coconut'
}
}
}
</script>
<style scoped>
</style>
I got this error : TypeError: _vm.getCoconut is not a function in the console of my browser and my page doesn 't display. this is the problem :
<child-component :fruitDisplay='getCoconut(item)'></child-component>
How can i resolve this.
I don't quite understand what you are trying to achieve, but I'll try to help. You seem to want to create a selector that will show you 'Fruit selected' when Coconut is selected.
You can't pass parameters to computed properties. But you could use a method that takes the currently selected fruit and then returns true or false.
You might want to create a custom selector, but it lacks more details about your question. That's why I used the typical selector here.
<div>Selected: {{ selected }}</div>
<select v-model="selected">
<option disabled>Please select one</option>
<option v-for="(item, key) in fruitList" :key="key" :value="item">
{{ item }}
</option>
</select>
<FruitSelector :fruitdisplay="getCoconut()" />
And your method:
getCoconut() {
return this.selected === 'Coconut'
}
I'm trying to apply a class to a <p> tag using a VueJS condition but it doesn't work at all, despite it working on JSfiddle. It's been 3 days now that I'm stuck, please help me.
VueJS (in main.js)
new Vue({
el: "#test",
data: {
selected: "2"
}
});
HTML (App.vue)
<div id="app">
<div id="test">
{{ selected }}
<p :class="{ selection: 1 === selected }">
heyyy 1
</p>
<p :class="{ selection: 2 == selected }">
heyyy 2
</p>
<button #click="selected = 2">Switch</button>
</div>
</div>
I'll assume you're using Vue-CLI since you have a .vue file, but your main.js is using syntax from Vue CDN. Maybe you copied the code from the fiddle instead.
I'll assume too that you have a CSS class named .selection for this to work.
Either way, App.vue has its own component instance which is not the main.js mounting instance (it's one level deeper). Your code creates selected in the mounting root instead of App.vue.
To fix, create it in App.vue <script> section instead:
<template>
<div id="app">
<div id="test">
{{ selected }}
<p :class="{ selection: 1 === selected }">
heyyy 1
</p>
<p :class="{ selection: 2 == selected }">
heyyy 2
</p>
<button #click="selected = 2">Switch</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selected: "2"
}
}
}
</script>
<style>
.selection {
/* CSS */
}
</style>
to apply class binding in VueJs you can use it as :
:class="{ 'selection(your class name here)': selected === 1}"
I got stucked with Vue.js. I am trying to basically wrap a component(that is already inside one component) into one more. I have a dropdown with a select and I call a function on change. Everything works fine until I wrap the component in one more on top. The top level one is in blade as it's used with Laravel. Snippets:
Component with dropdown:
<template>
<div id="watchlist-item">
<select #change="changed()" class="form-control"
id="currencies" name="currencyList">
<option value="USD" selected="selected">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</template>
<script>
export default {
name: "watchlist-item.vue",
methods: {
changed() {
alert("CHANGED");
},
},
}
</script>
Wrapper:
<template>
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</template>
<script>
export default {
name: "watchlist"
}
</script>
Top component:
<template>
<div id="watchlist">
<watchlist></watchlist>
</div>
</template>
<script>
export default {
name: "main-component"
}
</script>
Blade template:
#extends('layouts.layout')
<div>
{{-- <div id="maincomponent">--}}
{{-- <main-component></main-component>--}}
{{-- </div>--}}
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</div>
This works fine and i get alert on change. However, when i uncomment the commented part and vice-versa (so basically wrap it one more time) vue stops aletring me. I find this behaviour pretty weird but I am just starting with Vue so maybe its just a small detail I'm missing. I don't really even know what to search for though, so any help would be greatly appreciated. Thank you.
Just make sure that you are importing child components inside it's parent correctly:
main-component > watchlist > watchlist-item
| |
has has
Well it doesnt work because you need to register it via components, but first you need to import it.
<template>
<div id="watchlistItem">
<watchlist></watchlist>
</div>
</template>
<script>
import watchlist from "path/to/watchlist";
export default {
name: "watchlist",
components: {
watchlist: watchlist
}
}
hi im using vuejs with laravel project
and this is my vuejs code
Vue.component('search_and_select',{
template:
'<div>'+
'<slot :test_text="test_text"></slot>'+
'</div>',
data:function(){
return {
test_text:"test text",
}
},
methods:{
},
props:{
},
});
new Vue({
el:'.user_search_and_select',
data:{
},
});
and this is my html code
<div is='search_and_select'>
<div slot-scope="{test_text}">
#{{test_text}}
<input type='text' v-model='test_text' />
</div>
</div>
till now everything working so good
but if i keyup <input type='text' v-model='test_text' /> the test_text dont change still the same
so how can i change in slot and change in parent component too
thanks a lot ..
You have to expose a method to the slot for updating the value. This means you won't be able to use v-model because you will need to handle :value and #input separately now.
<slot :test_text="test_text" :update_test_text="update_test_text"></slot>
methods: {
update_test_text(value) {
this.test_text = value
}
}
Now you can use the component like this:
<search_and_select>
<div slot-scope="{ test_text, update_test_text }">
<input
type="text"
:value="test_text"
#input="update_test_text($event.target.value)"
>
</div>
</search_and_select>
I have an array of objects. These objects are loaded into a list in vue.js.
Aside from this list, I have a form that displays data from one of these objects. I want to, when clicking one of the list's elements, it will bind this specific object to the form and show its data.
How can do this in Vue.js?
My list code is:
<div id="app-7">
<ul id="food-list" v-cloak>
<food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.id" inline-template>
<li class="food">
<div class="food-header">
<img :src="'img/' + food.slug +'.png'">
<div class="food-title">
<p>{{food.name}} |
<b>{{food.slug}}</b>
</p>
<p>quantity: {{food.quantity}}</p>
</div>
<div class="food-load"> // load into form upon clicking this
</div>
</div>
</li>
</food-item>
</ul>
</div>
Since I do not have the code for the form, this is my best guess without clarification.
You can add a click handler to the item you want to be clicked. It will pass the value of the food item into the method.
<div class="food-load" #click="setFoodItem(item)">
</div>
And when that method is called, it can assign the clicked item to a data property. I'm not sure where your form is, and if it is in a different component. If it is in a child component, you would have to pass it in as a prop, or emit an event to pass it to a parent component.
data() {
return {
//create a reactive field to store the current object for the form.
foodItemForm: null
};
},
methods: {
//method for setting the current item for the form.
setFoodItem(item) {
this.foodItemForm = item;
}
}
Missing quite a bit of info in your sample code, your script is very important to see to make sense of what you would like to accomplish and where things might be going wrong.
Here's a quick list of the issue I came across with your code:
v-for refers to an individual food item as 'item', inside the loop you're trying to access properties as 'food'
You don't wrap your code in a component unless you're importing the component
When binding a value to 'v-bind:src' (or shorthand ':src') only pass the url, you should be specifying this in your script not inline.
You're better off using a button and the 'v-on:click' (or shorthand '#click') to load your selected food item into your form
You should also include your Javascript
Regardless, here's how I would handle this (took the liberty in filling in some blanks):
<template>
<div id="app">
<ul id="food-list">
<!--<food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.id" inline-template>-->
<li v-for="item in foodList" class="food">
<div class="food-header">
<img :src="item.slug" v-bind:alt="item.slug" width="250px" height="auto">
<div class="food-title">
<p>{{item.name}} | <b>{{item.slug}}</b></p>
<p>quantity: {{item.quantity}}</p>
</div>
<button class="food-load" #click="loadFoodItem(item.id)">Load Food Item</button>
</div>
</li>
<!--</food-item>-->
</ul>
<form v-if="activeFoodId != null" id="foodItemForm" action="#">
<h3>Food Form</h3>
<label for="food-id">Id:</label>
<input id="food-id" type="number" v-bind:value="foodList[activeFoodId].id"><br/>
<label for="food-slug">Slug:</label>
<input id="food-slug" type="text" v-bind:value="foodList[activeFoodId].slug"><br/>
<label for="food-name">Name:</label>
<input id="food-name" type="text" v-bind:value="foodList[activeFoodId].name"><br/>
<label for="food-quantity">Quantity:</label>
<input id="food-quantity" type="number" v-bind:value="foodList[activeFoodId].quantity">
</form>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
activeFoodId: null,
foodList: [
{
id: 1,
slug: 'http://3.bp.blogspot.com/-QiJCtE3yeOA/TWHfElpIbkI/AAAAAAAAADE/Xv6osICLe6E/s320/tomato.jpeg',
name: 'tomatoes',
quantity: 4
}, {
id: 2,
slug: 'https://img.purch.com/rc/300x200/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA2NS8xNDkvb3JpZ2luYWwvYmFuYW5hcy5qcGc=',
name: 'bananas',
quantity: 12
}, {
id: 3,
slug: 'https://media.gettyimages.com/photos/red-apples-picture-id186823339?b=1&k=6&m=186823339&s=612x612&w=0&h=HwKqE1MrsWrofYe7FvaevMnSB89FKbMjT-G1E_1HpEw=',
name: 'apples',
quantity: 7
}
]
}
},
methods: {
loadFoodItem: function (foodItemId) {
console.log(foodItemId)
this.activeFoodId = foodItemId
}
}
}
</script>
<style>
/# Irrelevant #/
</style>
Hope it helps!