Whenever I execute below code above error is shown. please help. I am a beginner in Vue.js so I do not have enough practice of Vue. I am trying to show different card on different button click.
<div v-for="item in cards">
<cards v-bind:if="cat==item.id" title="item.title" text="item.text"
src="item.src"></cards>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
cards:[
{'id':'0','title': 'BASED ON YOUR READING HISTORY Learn these neat
JavaScript tricks in less than 5 minutes', 'text':'Some quick
example text to build on the card title and make up the bulk of
the card', 'src':'', 'age_group':'pregnancy'},
],
cat:'0'
}
},
})
Vue.component('cards', {
props: ['title','source','text'],
template: '<div class="container-fluid" ><div class="card"
style="width:40%"><img style="float:right;" src={{source}}
alt="Card image cap"><div class="card-body"><h3 style="padding-
right:30%;">{{title}}</h5><p class="card-text" style="padding-
right:30%;">{{text}}</p><a href="#" class="btn btn-primary"
style="float:right;">Go somewhere</a></div></div></div>'
})
</script>
Related
I'm trying to add a button that would enable me to copy a snippet of code that is in view to the clipboard for a code catalog application in vue.js.
When I use the vue clipboard library and attempt this in the example component:
<div class="full-screen-code-snippet">
{{ example.codeSnippet }}
</div>
<div class="full-screen-copy-button">
<button v-clipboard:copy="example.codeSnippet"></button>
</div>
the snippet displays properly but the button does not. What's going on? How should I go about making this button?
You should be using it like : v-clipboard="variableName" or with :copy the same .
you can read more about it here or this one
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">Copy!</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
onCopy: function (e) {
alert('You just copied: ' + e.text)
},
onError: function (e) {
alert('Failed to copy texts')
}
}
})
</script>
Recently I have signed up for VueMstery and I am lost. In order to understand code I have a habit of visualizing code and can't move if I cannot make sense of code. What I do not understand in the following code is
how function named updateProduct is updating the DOM with the passed in image and
how it know which image to display. (this point confuses me a lot)
Following is the code
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" alt="">
</div>
<div class="product-info">
<h1>{{products}}</h1>
<p v-if='inStock'>In Stock</p>
<p v-else>Out of stock</p>
<p v-if='inventory <= 10'>Low on stock</p>
<ul>
<li v-for='detail in details'>{{detail}}</li>
</ul>
<div v-for='variant in variants'
class='color-box'
:style="{backgroundColor: variant.variantColor}"
#mouseover='updateProduct(variant.variantImage)'>
</div>
cart {{cart}}
<button #click='addToCart'>
Add to cart
</button>
</div>
</div>
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
and main.js
var app = new Vue({
el: '#app',
data: {
products: 'socks',
image: './assets/vmSocks-green.jpg',
inStock: true,
inventory: 10,
details: ["80% cotton", "20% polyester", "Gender-Neutral"],
variants: [
{
variantId: 2234,
variantColor: "green",
variantImage: "./assets/vmSocks-green.jpg"
},
{
variantId: 2235,
variantColor: "blue",
variantImage: "./assets/vmSocks-blue.jpg"
},
],
cart: 0
},
methods: {
addToCart: function(){
this.cart +=1
},
updateProduct: function(image){
this.image = image;
}
}
})
Look at the event handler which you've registered in the template:
#mouseover='updateProduct(variant.variantImage)'
Vue will run the function automatically when events fire. The function updateProduct just updates the value image in your data object. Vue detects any changes for that data and updates DOM when nessesary.
Also because your img tag depends on image property of data object:
<img :src="image" alt="">
you will see that image changes.
How do I create very simple instant search filter based on input field value wherein the data is already displayed?
I created this fiddle and I would like the same functionality but I am just worrying if my back end developer will pull the data using PHP to display all the products and that said reactivity will not work.
So what is the best approach to make it work in this scenario?
Edit: So without the products data it will be like this .
Here is my HTML code:
<div id="app">
<div class="searchbox">
<input id="search-product" placeholder="Search Products" v-model="search" >
</div>
<div class="product-list">
<span class="product" v-for="product in filteredList">
<div class="product-img">
<img src="https://avatars2.githubusercontent.com/u/6325887?s=120&v=4">
<span class="price-tag">{{ product.price }}</span>
</div>
<div class="product-name" v-bind:data-sku="product.sku">{{ product.productName }}</div>
</span>
</div>
</div>
My script:
const app = new Vue({
el: '#app',
data: {
search: '',
products:[
{sku: "SS0001",productName: "alimango buttered",price: "seasonal", productCategory:"seafood specials"},
{sku: "SS0002",productName: "alimango steamed",price: "seasonal", productCategory:"seafood specials"},
{sku: "SS0003",productName: "chili crab with tomato sauce",price: "seasonal", productCategory:"seafood specials"},
{sku: "SS0004",productName: "malaga prito",price: "seasonal", productCategory:"seafood specials"},
]
},
computed: {
filteredList() {
return this.products.filter(product => {
return product.productName.toLowerCase().includes(this.search.toLowerCase())
})
}
}
});
I am learning to use vue js with wprest api by following watch-learn tutorials on the same topic. the problem is that the vue js version used in the tutorial seems to be v 1.x and i started using vue js 2.x. I was able to figure out the initial stages on how to display all the post using vue js 2.x.. I have an input field using which I search for a specific title it should filter and show the post. The issue is unable to workout exactly how it needs to be computed using vuejs 2.x.. I have included a codepen link containing the json data as well as my working code.
the following is the input field to be used to filter the posts by title
<div class="row">
<h4>Filter by name:</h4>
<input type="text" name="" v-model="nameFilter">
</div>
<div class="row">
<div class="col-md-4" v-for="post in posts">
<div class="card post">
<img class="card-img-top" v-bind:src="post.fi_300x180" >
<div class="card-body">
<h2 class="card-text">{{ post.title.rendered }}</h2>
<small class="tags" v-for="category in post.cats">{{ category.name }}</small>
</div>
</div> <!-- .post -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
https://codepen.io/dhivyasolomon/pen/LdZKJY
I would appreciate any help in figuring out the next step. thanks.
You don't need directives, achieve this using the power of Computed properties
So you will have to itarate over the computed property which filter the posts by the input value and return a new array of posts.
Little example:
new Vue({
el: '#example',
computed: {
filteredPosts () {
return this.posts.filter(p => p.title.toLowerCase().includes(this.filterText.toLowerCase()))
}
},
data () {
return {
filterText: '',
posts: [
{
title: 'My first post title',
body: 'foo'
},
{
title: 'Another post title',
body: 'foo'
},
{
title: 'This will work fine',
body: 'foo'
},
{
title: 'Omg it\'s working!',
body: 'foo'
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="example">
<input type="text" v-model="filterText" />
<ul>
<li v-for="post in filteredPosts">{{ post.title }}</li>
</ul>
</div>
I have a very basic vue.js app:
var app = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
messages: [
'Hello from Vue!',
'Other line...'
]
}
})
The following html works fine:
<div class="container" id="app">
<div class="row" style="">
<div class="col-md-8 offset-md-2">
<span v-for="msg in messages">${msg}</span>
</div>
</div>
</div>
However very similar html block does not:
<div class="container" id="app">
<div class="row" style="">
<div class="col-md-8 offset-md-2">
<textarea id="chat_area" readonly="" rows="20">
<span v-for="msg in messages">${msg}</span>
</textarea>
</div>
</div>
</div>
[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
I'm using Vue v2.3.3. What could be the problem?
As documentation says, interpolation in textareas won't work, so you need to use v-model.
If the only thing you want to do is to display html inside textarea, you could in theory use an ugly workaround by wrapping your array fields inside a function and set that function as textarea v-model:
var app = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
messages: [
'Hello from Vue!',
'Other line...'
]
},
computed:{
multiLineMessages: function(){
var result = "";
for(var message of this.messages){
result += '<span>' + message + '</span>'
}
return result;
}
}
});
template part:
<div class="container" id="app">
<div class="row" style="">
<div class="col-md-8 offset-md-2">
<textarea v-model="multiLineMessages" placeholder="add multiple lines">
</textarea>
</div>
</div>
</div>
It's more like a proof that it's doable but I highly don't recommend using it anywhere, as html shouldn't be generated this way (especially larger chunks of it).
jsFiddle preview