Trying out Vue for the first time and having some problem with some values not being recognized in the template even though they are set when checking with the Chrome Vue debug tool.
I'm doing this in a Wordpress context if that matters, with an inline template. I stripped down a lot of non-important code in my example below to just focus on the loader. I'm setting the loading value to true and here I'm not changing it anywhere. When loading the page I can see the spinner briefly then it disappears. However the value of loading is true when I check with debug tool. What am I doing wrong?
Javascript:
(function($) {
var employeesListingElement = document.getElementById('vue-employees-listing');
if ( employeesListingElement ) {
var EmployeesListing = new Vue({
el : employeesListingElement,
data() {
return {
employees: [],
filter: '',
errors: [],
loading: true
}
}
});
}
})(jQuery);
HTML
<div id="vue-employees-listing">
<div v-if="employees.loading" class="ajax-loader">
<p>Loading</p>
</div>
</div>
Your template should be
<div v-if="loading" class="ajax-loader">
employees is an array.
Related
I'm attempting to incorporate vee-validate validation (version 2) against a basic/simple radio input, such as:
<div id="app">
<form id="webform" action='post.php' method='POST' #submit.prevent="doSubmit()">
<input type='radio' name='color' value='blue'> Blue<br>
<input type='radio' name='color' value='pink'> Pink
</form></div> <!-- div id app -->
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
p_arr_condition_id: null,
};
},
methods: {
doSubmit() {
this.$validator.validateAll().then(function(result){
if (!result){
//this means a validation failed, so exit without doing anything
return;
}
//here you would put your form submit stuff
window.onbeforeunload = null;
document.getElementById('webform').submit();
});
}
}
});
</script>
But I'm unsure where to begin. I discovered a working example here, however I'm not showing how to actually implement their example. Their Docs link results in a 404.
Any help/guidance would be super appreciated.
The demo iframe has a not-so-obvious slider on the left side that allows you to see the code used in the example. You can also go directly to the code sandbox
I have an issue where the Vue object is undefined in the browser, after I load in Vue with RequireJS. I'm not sure what's going on, I hope someone has some pointers to focus on.
Something worth noting is that I'm placing this code through our custom framework into a MVC C# application. Ultimately the code is placed in views and served along all other JS / HTML.
The HTML is placed first, after which the script is executed.
HTML:
<div id="aapje">
{{ message }}
</div>
JS:
require(['https://unpkg.com/vue'], function() {
var appje = new Vue({
el: '#aapje',
data: {
message: 'Hello Vue!'
}
});
});
Console dump:
Codepen: https://codepen.io/olafjuh/pen/oKWKXG
To achieve expected result, pass 'Vue' as parameter to callback funtion of require
working code sample
require(['https://unpkg.com/vue'], function(Vue) {
var appje = new Vue({
el: '#aapje',
data: {
message: 'Hello Vue!'
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
<div id="aapje">
{{ message }}
</div>
codepen - https://codepen.io/nagasai/pen/WVjVoV
I have a custom component, that has inner html with {{braces}}, calling functions like v-on:click="click()" and other. I want to read this html and then work with it.
Vue.config.ignoredElements = ['clmn'];
Vue.component("tbln", {
template: `<div></div>`,
functional: true,
render: (h, ctx) => {
var children = ctx.children.filter(vnode => vnode.tag);
console.log(children)
if (ctx.props.show) {
return children[0]
} else {
return children[0].children
}
}
})
new Vue({
el: "#app",
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<tbln>
<clmn bind="data" sort="data" align="left"></clmn>
<clmn no-sort>
<div>{{ text }}</div>
</clmn>
<clmn bind="vvv" sort-func="func"></clmn>
</tbln>
</div>
But Vue automatically compiles full and throws errors.
How to prevent compile inner html in some tags?
I tried different methods to solve this problem, but all did not help me:
I added tag into Vue.config.ignoredElements. Not working, i catch an error
v-pre and template not a solution, I just need to make the
code easy to understand
I can't get how to use v-html to save an existing content. For example:
<div ref="content" v-html="content">Hello, World! A lot of divs</div>
How to make to div content was replace only when I will assign a some not null value with content? Or how to make it in another way? Or is the single way to request div content asynchronously?
The next way works, of course, but I lose a data binding.
this.$refs['content'].innerHTML = "New content";
P.S. I am migrating from jQuery and still can't think in Vue.js philosophy clearly.
Actualy, you must read vue documentation.
In your component you must declare content in data, and simply change it in oher places, i.e. in button's click handler or inside component's methods:
new Vue({
el: "#root",
data: function () {
return {
content: 'Hello, World! A <b>lot</b> of divs'
};
},
methods: {
changeText: function() {
this.content = 'This text from component';
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="root">
<div v-html="content"></div>
<button v-on:click="content = 'This text from button'">Click me</button>
<button v-on:click="changeText">And me</button>
</div>
You could assign a default value to content.
data () {
return {
content: 'Hello, World! A lot of divs'
}
}
When you'll assign a new value to content it will get rendered.
Another way would be to check if content is not null and have 2 different divs using v-if/v-else for conditional rendering.
<div v-if="content" v-html="content"></div>
<div v-else>Hello, World! A lot of divs</div>
and the script
export default {
name: 'customComponent',
data () {
return {
content: null
}
}
}
I have a Vue directive added in an appended html element like v-on directive but it's not working on my end. Basically I want to know the equivalent of .on() in jquery.
"Vue.js compilation happens when you instantiate/mount the root instance. It doesn't detect new DOM being injected unless it is a result of a directive (e.g. v-repeat, v-partial will dynamically create new DOM fragments)."
https://github.com/vuejs/Discussion/issues/77
You have to compile your newly added element like this:
html:
<div id="app">
<button v-on="click: addNewElement()">Add Element</button>
<br />
</div>
JavaScript
new Vue({
el: '#app',
data: {
sampleElement: '<button v-on="click: test()">Test</button>'
},
methods:{
addNewElement: function(){
var element = $('#app').append(this.sampleElement);
/* compile the new content so that vue can read it */
this.$compile(element.get(0));
},
test: function(){
alert('Test');
}
}
});
See this working Fiddle on Firefox: http://jsfiddle.net/chrislandeza/syewmx4e/
Update
$compile has been removed on Vue 2.x
I've seen people suggesting Vue.compile or
var tmp = Vue.extend({
template: 'Content'
})
new tmp().$mount(' id or refs ')
But those 2 does not behave like the old $compile.
For Vue 2.x, the new solution is referenced here in the doc : https://v2.vuejs.org/v2/api/#vm-mount (see 'Example').
Custom example :
var MyComponent = Vue.extend({
template: '<div v-on:click="world">Hello!</div>',
methods : {
world : function() {
console.log('world')
}
}
})
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app"></div>
Works like a charm!
You need to register the html as a template of the component.