This question already has answers here:
How to pass a value from Vue data to href?
(5 answers)
How can I solve "Interpolation inside attributes has been removed. Use v-bind or the colon shorthand"? Vue.js 2
(6 answers)
Closed 4 years ago.
I need to create a dynamic link which makes use of a bound variable. The "dynamism" of the link is done though a modification of the href field with a bound variable ip:
new Vue({
el: "#app",
data: {
ip: "10.1.1.1"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
{{ip}}
</div>
This does not work because {{ip}} is not interpolated and I get a warning
Interpolation inside attributes has been removed. Use v-bind or the
colon shorthand instead. For example, instead of <div id="{{ val }}">,
use <div :id="val">.
Switching href= into :href= breaks the template:
new Vue({
el: "#app",
data: {
ip: "10.1.1.1"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
<a :href="http://example.com/ip">{{ip}}</a>
</div>
How can I use bound values in href?
EDIT: I cannot use a computed value (which would have been the first idea) because I am in a Buefy table and uses the data current to the row i am in (see https://codepen.io/WoJWoJ/pen/vrOgOX?editors=1010 for an example, the props.row elements properties are my ip)
You need to write a JS Expression inside :href, like
<a :href="'http://example.com/' + ip">IP</a>
Note the single quotes (devoting string) inside the double quotes (enclosing attribute value/definition).
you could use it with a computed property:
new Vue({
el: "#app",
data: {
ip: "10.1.1.1"
},
computed: {
ipUrl: function() {
return `http://example.com/${this.ip}`;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<div id="app">
<a :href="ipUrl">{{ip}}</a>
</div>
Related
I have my Vue element props.item[hdr.value] which is changable. I print this to my webpage using {{ props.item[hdr.value] }}, but I am unsure how to use this value to create a dynamic title tag to mu link:
<a #click="testFunc()" title="More on %%%">{{ props.item[hdr.value] }}</a>
I have tried ' ', + +, { }, {{ }} and various combinations around the call (and numerous Google searches) but I just cannot seem to find he rights syntax to get this to display.
Can anyone help out here please?
You can try this,
new Vue({
el: '#app',
data: {
dynamicVariable: 'Hello Vue.js!'
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<a #click="testFunc()" :title="`More on ${dynamicVariable}`">{{ dynamicVariable }}</a>
</div>
After some work I got the solution, it is a derivative of the answer posted by #ricristian
<a #click="testFunc()" :title="'More on ' + props.item[hdr.value]"></a>
I have the following issue, for some reason, the v-for will not render at all. Please find the fiddle here https://jsfiddle.net/tadeyemi/k6s4gv85/ I have absolutely no idea why it isn't working. Someone care to shed some light?
<div id="app">
<h1>Finds</h1>
<div>
<input ref="option">
</div>
<button v-if #click="addFind">
New Find
</button>
<p v-for="(option,idx) in options.slice(1)">
<span #click="removeOption(idx+1)">Option{{idx+1}}: {{option}}</span>
</p>
</div>
and the JavaScript as follows:
new Vue({
el: '#app',
data: {
options: [],
count:0
},
methods: {
addFind: function () {
var msg = this.$refs.option.value;
console.log(this.options);
if( msg.trim() != "" ){
this.count++;
var i = this.count;
this.options[i]= this.$refs.option.value.trim();
}
},
removeOption:function(index){
this.options.splice(index,1);
this.count--;
}
}
});
There are some issues with your code, but the most prominent is that you break some reactivity rules explained here: https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays
Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g.
vm.items[indexOfItem] = newValue When you modify the length of the
array, e.g. vm.items.length = newLength
Basically: this.options.push(msg.trim()); would work, while this.options[i]= this.$refs.option.value.trim(); won't
I edited the fiddle a little to make it work: https://jsfiddle.net/63jyw7gz/
EDIT: Answered, increment and decrement changed the values. '#' + (post.id+1) and '#' + (post.id-1) do not, thansk blex.
I have a series of id'ed divs that I want to navigate to the next one and the previous one through links.
Using vue.js, I want to put in a JavaScript expression in the href to add one to the current id to function as a "next" button, and have another link that subtracts one from the current id to function as a "previous" button.
Here is my HTML, where I have a Vue Component:
<script src="https://unpkg.com/vue"></script>
<div id="blog-post-demo" class="demo">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
</div>
And here is my JavaScript, where I make the component and template:
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post" v-bind:id="post.id">
<h1>{{ post.title }}</h1>
<div v-html="post.body"></div>
<a :href="'#' + post.id--">Previous Entry</a>
<a :href="'#' + post.id++">Next Entry</a>
</div>
`
})
new Vue({
el: '#blog-post-demo',
data: {
posts: []
},
created: function () {
// Alias the component instance as `vm`, so that we
// can access it inside the promise function
var vm = this
// Fetch our array of posts from an API
fetch('https://api.myjson.com/bins/1bjyk2')
.then(function (response) {
return response.json()
})
.then(function (data) {
vm.posts = data
})
}
})
Right now, I'm using increment and decrement operators to change the values, but no such luck.
What doesn't work is that the "Next Entry" link goes back two, and the "Previous Entry" link goes to the same id. How can I fix this? Here is a jsfiddle that I've been working on, originally from the Vue.js components tutorial.
I am trying do display an element for each array inside an array and display that element if its array contains a true boolean. The if function runs the first time but the element does not disappear when the value changes.
<li v-for="(value, index) in list">
<span> {{ value[0] }} </span>
<span v-if='value[1]'> {{ value[2] }} </span>
</li>
var List = new Vue({
el: "#List",
data: {
list: ['fizz',true,0],
},
methods: {
toggleItem: function(index) {
this.list[index][1] = !this.list[index][1];
},
}
})
I should be able to run
List.toggleItem(0)
If you are updating the array in Vue then use Vue.set(); so that Vue can track the changes and update the template
for example,
Vue.set(value, 1, false);
Note: simpley updating like this value[1] = false; this will not work
For more, https://v2.vuejs.org/v2/guide/list.html#Caveats
I am using sortable js for drag and drop action. (Link to github page) As I am using vue.js as well, I am using this plugin to bridge them. I am new to both of the library and so I am trying to duplicate the example given in the plugin. (i.e. this example)
HTML section:
<div class="drag">
<h2>List 1 v-dragable-for</h2>
<div class="dragArea" >
<template v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone", "put":false }}' track-by="$index">
<p>{{element.name}}</p>
</template>
</div>
<h2>List 2 v-dragable-for</h2>
<div class="dragArea">
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
</div>
</div>
Javascript part:
var vm = new Vue({
el: "#main",
data: {
list1:[{name:"John" , id:"1"},
{name:"Joao", id:"2"},
{name:"Jean", id:"3"} ],
list2:[{name:"Juan", id:"4"},
{name:"Edgard", id:"5"},
{name:"Johnson", id:"6"} ]
},
methods:{
}
});
It works fine on jsfiddle, but when I try to duplicate the case on my local server, it always return 0 for both oldIndex and newIndex in the onUpdate event. This makes the element always insert at the beginning of the second list. Any clue on what can I miss to cause this problem?