Adding a Vue Element to Hyperlink - javascript

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>

Related

How to use a bound variable in <a>'s href? [duplicate]

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>

vue.js javascript expression in href

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.

Vue on:click Seems to Call All Methods

I'm currently in the process of learning Vue, and I ran into an issue that I'm hoping someone can help me with.
While using the v-on:click directive to call a method, all other instance methods are being called if the method is also used elsewhere.
HTML:
<div id="exercise">
<div><button class="test" v-on:click="newCheck()">New Challenge</button>
<p >Success check is: {{ passCheck }}</p>
</div>
<div>
<button class="roll" v-on:click="roll20()">Roll!</button>
<p>You Rolled a {{ roll20() }}</p>
</div>
</div>
JS:
new Vue({
el: '#exercise',
data: {
yourRoll: '10',
passCheck: '10',
},
methods: {
roll20: function(){
this.yourRoll = Math.round(Math.random()*19)+1;
return this.yourRoll;
},
newCheck: function(){
this.passCheck = Math.round(Math.random()*19)+1;
}
}
});
When {{ roll20() }} is used in the second paragraph, clicking the 'New Challenge' button runs both roll20() and newCheck(). However, if {{ yourRoll }} is used in the second paragraph instead, this doesn't happen.
In both instances, clicking 'Roll!' only runs roll20().
Can someone help explain what is happening here?
Here is a codepen of the issue:
Codepen of code
Note: I ended up bypassing the issue by using a different approach, but I would still like to know why this was happening: Working Approach
Whenever the DOM is updated, it will run roll20 again, because of the line:
<p>You Rolled a {{ roll20() }}</p>
So anything that triggers an update will trigger roll20 by consequence.
Now, because of the template:
<div><button class="test" v-on:click="newCheck()">New Challenge</button>
We know that when you hit the New Challenge, it calls the newCheck method.
And because the newCheck method changes a variable (passCheck) that is used in the template:
newCheck: function(){
this.passCheck = Math.round(Math.random()*19)+1;
}
That is used here:
<p>Success check is: {{ passCheck }}</p>
Changing passCheck will trigger a DOM update. And DOM updates will call roll20 automatically (because of the reason stated in the first paragraph of this answer).
Working around it:
The simplest way is just not to call roll20 in the template. And, as roll20 actually updates a yourRoll property:
roll20: function(){
this.yourRoll = Math.round(Math.random()*19)+1;
return this.yourRoll;
},
You could just use yourRoll in the template, instead of roll20():
<p>You Rolled a {{ yourRoll }}</p>
CodePen: https://codepen.io/acdcjunior/pen/PePBeo
<div id="exercise">
<div><button class="test" v-on:click="newCheck()">New Challenge</button>
<p >Success check is: {{ passCheck }}</p>
<!-- 3) Call a function to output a random float between 0 and 1 (Math.random()) -->
</div>
<div>
<button class="roll" v-on:click="roll20()">Roll!</button>
<p>You Rolled a {{ yourRoll }}</p> <!-- this changed -->
</div>
</div>
new Vue({
el: '#exercise',
data: {
yourRoll: '10',
passCheck: '10',
},
methods: {
roll20: function(){
this.yourRoll = Math.round(Math.random()*19)+1;
},
newCheck: function(){
this.passCheck = Math.round(Math.random()*19)+1;
}
}
});
Try this it workes fine!Just output your data property because in one your was calling the method! See it in action

Why oldIndex and newIndex always return 0 for Sortable JS (rubaxa-sortable)?

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?

AngularJS - Integers returned as null in nested JSON

I'm having a problem with pulling integer values from nested JSON in AngularJS. Strings from the same layer and all data from parent layers are pulling in fine, however numbers are being treated as 'null'. Everything else appears to be working correctly.
E.g. - 'thumbnail', a string, is pulling in fine, whereas thumbnail-height, an integer value on the same layer of JSON, is apparently null.
A stripped down version of my code is available here with examples of the data I'm trying to pull out, and I've pasted it in below.
In a nutshell, I'm wondering why {{ card.acf.thumbnail_image.sizes.thumbnail-height }} is returning 'null'.
Thanks in advance for any suggestions as to why this isn't working!
JS:
var app = angular.module('myApp', [ ]);
app.controller('CardController', function($scope,$http) {
var data =
[
{
"ID":5303,
"acf":{
"thumbnail_image":{
"width":2286,
"sizes":{
"thumbnail":"thumbnail1.png",
"thumbnail-height":91
}
}
}
},
{
"ID":5290,
"acf":{
"thumbnail_image":{
"width":1369,
"sizes":{
"thumbnail":"thumbnail2.png",
"thumbnail-height":80
}
}
}
}
]
$scope.dataList = data;
});
HTML:
<div ng-app="myApp">
<div ng-controller="CardController as tc">
<ul>http://jsfiddle.net/axrys5cr/1/#fork
<li ng-repeat="card in dataList">
<h1>{{card.ID}}</h1>
<p>card.acf: {{ card.acf }}</p>
<hr>
<p>card.acf.thumbnail_image.width: {{ card.acf.thumbnail_image.width }}</p>
<hr>
<p><b>card.acf.thumbnail_image.sizes.thumbnail-height:</b> {{ card.acf.thumbnail_image.sizes.thumbnail-height }}</p>
<p><b>card.acf.thumbnail_image.sizes.thumbnail:</b> {{ card.acf.thumbnail_image.sizes.thumbnail }}</p>
</li>
</ul>
</div>
</div>
{{ card.acf.thumbnail_image.sizes.thumbnail-height }}
should be
{{ card.acf.thumbnail_image.sizes['thumbnail-height']}} because thumbnail-height key contains a invalid char -.
Keys cannot contain a hyphen - when using dot notation. So when you bind to:
{{ card.acf.thumbnail_image.sizes.thumbnail-height }}
What you're actually saying is : card.acf.thumbnail_image.sizes.thumbnail minus height.
You can use bracket notation instead:
{{ card.acf.thumbnail_image.sizes["thumbnail-height"] }}

Categories

Resources