Currently I have solved things in an other way, but I am still curious why this is not working.
I'm trying to render a transition with a template with 2 directives, but it seems it tries to resolve the attrs/props from an other scope, but I can't see why at this point. Perhaps I just made a stupid mistake.
This gives me the error:
"[Vue warn]: Failed to resolve directive: ..." for both bind and text
<script>
import Step from './Step';
export default {
data() {
return {
pointer: 0,
steps: [],
}
},
render(createElement) {
this.steps = this.$slots.default
.filter(vnode => vnode.tag && vnode.tag.indexOf(Step.name) > -1);
this.pointer = this.steps[0].key;
return createElement('div',
{},
[
createElement('transition',
{},
[
createElement('template', {
directives: [
{name: 'bind', arg: 'key', value: 'pointer'},
{name: 'text', value: 'step'},
],
})
]
)
]);
},
computed: {
step() {
return _.find(this.steps, step => step.key === this.pointer);
}
},
methods: {
next() {
++this.pointer;
}
}
}
</script>
Related
I'm creating a recursive method in Nuxt, can I do it?
Here is my component:
<script>
export default {
data() {
return {
items: [],
auxitems: [],
}
},
methods: {
orderRecursive(items, auxitems) {
items.data.forEach((element) => {
auxitems.push(element)
})
if (items.child.length > 0) {
this.orderRecursive(items.child, auxitems)
} else {
//
}
},
},
}
</script>
The struct items is like:
items= [
data: [{array}],
child: [{data, child}]
]
My intention is order all data in one array, then, I can show in view.
My method orderRecursive() is not working, can you tell me why?
So I wanted to see if I can get some guidance from the community if there is a better way to approach this:
So I have the following vue.js app:
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
const default_apps = [
{
'post_title': 'Excel',
}, {
'post_title': 'Word',
}, {
'post_title': 'SharePoint',
}];
return {
available_list: [],
selected_list: default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
}),
}
},
computed: {
dragOptions() {
// Pass in additional <draggable> options inside the return for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});
The selected_list returns the following items:
I was told that it's bad practice to do array mapping inside the data return, but to instead map inside the computed call - Could someone lead me in the right direction and just see if my code makes sense?
I tried defining an empty array as shown below:
return {
available_list: [],
selected_list:[],
}
& then inside the computed property, I tried accessing it using the following return but wasn't getting any data back:
selected_list() {
return this.default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
});
},
All help is appreciated - Thanks a bunch!
your are almost there except for a few details:
It's ok to map data inside data as long as you put them inside the return object literal data() { return { default_apps: [] } }.
Once default_apps is inside the return object of data, you can access the data inside of it from a computed property using the this keyword: this.default_apps.map()...
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
return {
default_apps: [
{ post_title: 'Excel' },
{ post_title: 'Word' },
{ post_title: 'SharePoint'}
],
available_list: [],
}
},
computed: {
selected_list() {
return this.default_apps.map(function(name, index) {
return { name: name.post_title, order: index + 1, fixed: false };
});
},
dragOptions() {
// Pass in additional <draggable> options inside the return for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});
I'm trying to add the paypal sdk via vue-head(https://www.npmjs.com/package/vue-head) in my component but I keep getting this error:
Error in mounted hook: "ReferenceError: paypal is not defined"
What am I doing wrong here? Is the SDK simply not loading before mounted?
Is there a better way to accomplish this? Does anyone have an example of their paypal implementation in vue? Any help would be greatly appreciated.
edit: Also if I include the script tag server side (rails) then try to access paypal in vue I see this error:
Could not find driver for framework: [object Object]
<template>
<div id="paypal-button" />
</template>
<script>
import { mapState as mapConfigState } from '../scripts/store/appConfig';
export default {
props: {
totalPrice: {
type: String,
required: true,
},
currency: {
type: String,
required: true,
'default': 'USD',
},
buttonStyle: {
type: Object,
required: false,
},
},
computed: {
...mapConfigState({
customer: state => state.customer,
}),
paypalEnvironment() {
return (this.customer.paypalTestingMode) ? 'sandbox' : 'production';
},
client() {
return {
sandbox: this.customer.paypalClientIdSandbox,
production: this.customer.paypalClientIdLIVE,
};
},
},
head: {
script() {
return [
{
type: 'text/javascript',
src: `https://www.paypal.com/sdk/js?client-id=${this.client[this.paypalEnvironment]}`,
},
];
},
},
mounted() {
const total = this.totalPrice;
const currency = this.currency;
paypal.Buttons.driver(
{
env: this.paypalEnvironment,
client: this.client,
style: this.buttonStyle,
createOrder(data, actions) {
return actions.order.create({
purchase_units: [
{
amount: {
value: total,
currency,
},
},
],
});
},
onApprove(data, actions) {
return actions.order.capture();
},
}, '#paypal-button'
);
},
};
</script>
edit2: I tried adding the script in my mounted hook like this:
let el = document.querySelector(`script[src="https://www.paypal.com/sdk/js?client-id=${this.client[this.paypalEnvironment]}"]`);
if (!el) {
const src = `https://www.paypal.com/sdk/js?client-id=${this.client[this.paypalEnvironment]}`;
el = document.createElement('script');
el.type = 'text/javascript';
el.async = true;
el.src = src;
document.head.appendChild(el);
}
I can see the script in the head tag in the dev console but paypal still is not defined.
For anyone else who is trying to implement PayPal in a Vue component:
<template>
<div id="paypal-button" />
</template>
<script>
export default {
mounted() {
function loadScript(url, callback) {
const el = document.querySelector(`script[src="${url}"]`);
if (!el) {
const s = document.createElement('script');
s.setAttribute('src', url); s.onload = callback;
document.head.insertBefore(s, document.head.firstElementChild);
}
}
loadScript('https://www.paypal.com/sdk/js?client-id=sb¤cy=USD', () => {
paypal.Buttons({
// Set up the transaction
createOrder(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '0.01',
},
}],
});
},
// Finalize the transaction
onApprove(data, actions) {
return actions.order.capture().then(details => {
// Show a success message to the buyer
alert(`Transaction completed by ${details.payer.name.given_name}`);
});
},
}).render('#paypal-button');
});
},
};
</script>
Alternatively you can use this: https://github.com/paypal/paypal-js
I want to display my getters in web but in console.log i have undefined errors. but in vue dev tool my getters are working.
my component code :
export default {
data: () => ({
items: [
{ text: 'Real-Time', icon: 'mdi-clock' },
{ text: 'Audience', icon: 'mdi-account' },
{ text: 'Conversions', icon: 'mdi-flag' },
],
}),
computed: {
Question(){
return this.$store.getters.getQuest
}
},
methods: {
Next(){
this.$store.commit('incrementIndex')
}
},
}
and this my vuex :
export default new Vuex.Store({
state: {
question: [],
index: 0
},
getters: {
getQuest: state => {
let a = state.question[state.index]
let answer = [...a.incorrect_answers, a.correct_answer]
return {
question: a,
answer: answer
}
}
},
In the getter you need to check whether all information is loaded yet. So this is roughly what I'd do:
export default new Vuex.Store({
state: {
question: [],
index: 0
},
getters: {
getQuest: state => {
let a = state.question[state.index]
if (a){
let answer = [...a.incorrect_answers, a.correct_answer]
return {
question: a,
answer: answer
}
} else {
return null
}
},
You are getting undefined errors because initially question is an empty array.
So state.question[state.index] is basically undefined
And then you are trying to access property incorrect_answers of undefined which will not work and will give undefined errors
I am using https://github.com/r3code/vue-vis-network
I am getting error: Cannot read property 'hasChildNodes' of undefined
My component code is:
<template>
<el-container >
<el-main>
<network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>
<button #click="get_data">GetData</button>
</el-main>
</el-container>
</template>
<script>
export default {
components: { Notification },
data () {
return {
nodes: [],
edges: [],
options: []
}
},
methods:
{
get_data()
{
axios.get(base_url + '/graph')
.then((response) => {
this.nodes = response.data.nodes;
this.edges = response.data.edges;
}).catch((error) => { console.log(error); });
}
},
}
</script>
index.js:
Vue.component('network', new vueVisNetwork.Network);
I suppose that there is problem that it's attempt to access to data placed in #app. How I can say him that he should use data declared in component?
Actual data example:
nodes : [
{id: 1, label: 'Fooo"', group: "company"},
{id: 2, label: 'Baaar', group: "owner"},
],
edges : [
{from: 1, to: 2},
],
possible related issue https://github.com/crubier/react-graph-vis/issues/57