Is it a way to pass a variable in my .vue to a .js function that it import? How can I pass the cur_page variable to '#/js/enquiry.js'?
page.vue:
<template>
<custom-page v-if="tableReady"
:current_page="cur_page" <-- the var I want to pass-->
v-on:changePage="changePage"/>
</template>
<script>
import dataRen from '#/js/enquiry.js'// the js file that I want to pass the var to
export default {
data() {
return {
cur_page:1,
},
methods: {
drawBettingEnquiryTable() {
let cols = '';
var pageTotal ='';
cols = dataRen.betting_header(this.lang);
this.enquiryTable = $('#js-table').DataTable({
columns: cols,
})
}
}
}
}
</script>
Related
I am trying to develop a simple plugin for CKEditor 5. My ultimate goal is to have the plugin emit the following HTML:
<div class="icms_note">
<div class="span-6 module-note">
<p>User can edit here</p>
</div>
<div class="clear"></div>
</div>
I was having issues with the user editable area being in the wrong spot so I reduced the output to just this:
<div class="icms_note">
<p>User can edit here</p>
</div>
and the data model looks like this:
<icms_note>
<paragraph>User can edit here</paragraph>
</icms_note>
So I can get the data model created correctly and the HTML ends up in the editor the way I expect but I can't edit the text in the paragraph. I click on the text and the cursor just jumps out. I've tried looking at other examples and the tutorials but I can't seem to get it to work right. My plugin code is below. Any help would be appreciated.
note.js
import Plugin from "#ckeditor/ckeditor5-core/src/plugin";
import NoteEditing from "./noteediting";
import NoteUI from "./noteui";
export default class Note extends Plugin {
static get requires() {
return [ NoteEditing, NoteUI ];
}
static get pluginName() {
return "IcmsNote";
}
}
noteui.js
import Plugin from "#ckeditor/ckeditor5-core/src/plugin";
import { ButtonView } from "#ckeditor/ckeditor5-ui";
export default class NoteUI extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( "icms_note", (locale) => {
const button = new ButtonView(locale);
button.set({
label: "Note",
withText: true,
tooltip: true
});
button.on( "execute", () => {
editor.execute("insertNote");
});
return button;
} );
}
}
noteediting.js
import Position from "#ckeditor/ckeditor5-engine/src/view/position";
import NoteCommand from "./notecommand";
export default class NoteEditing extends Plugin {
init() {
this._defineSchema();
this._defineConverters();
this.editor.commands.add("insertNote", new NoteCommand(this.editor));
}
_defineSchema() {
const schema = this.editor.model.schema;
schema.register( "icms_note", {
inheritAllFrom: "$text",
allowIn: [ "$root", "$container" ],
isInline: true
});
}
_defineConverters() {
const conversion = this.editor.conversion;
conversion.for( "downcast" ).elementToElement({
model: "icms_note",
view: ( modelElementValue, conversionApi ) => {
const { writer } = conversionApi;
const outerDivElement = writer.createEditableElement("div", {class: "icms_note"});
return outerDivElement;
}
});//<div><div class=\"span-6 module-note\"><p>Enter note</p></div><div class=\"clear\"></div></div>
conversion.for( "upcast" ).elementToElement({
view: {
name: "div",
attributes: {
classes: [ "icms_note" ]
}
},
model: {
key: "icms_note",
value: viewElement => {
const val = viewElement.getChildren()[0].getChildren()[0].data;
return val;
}
}
});
}
}
notecommand.js
import Command from "#ckeditor/ckeditor5-core/src/command";
export default class NoteCommand extends Command {
constructor(editor) {
super(editor);
}
execute() {
console.log("NoteCommand#execute");
const model = this.editor.model;
const selection = model.document.selection;
model.change( modelWriter => {
let position = selection.getFirstPosition();
const icmsNote = modelWriter.createElement("icms_note");
const paragraph = modelWriter.createElement("paragraph");
modelWriter.insert(paragraph, icmsNote);
modelWriter.insertText("User can edit here", paragraph);
let positionElementName = position.parent.name;
while (positionElementName != "$root" && positionElementName != "$container") {
position = model.createPositionAfter(position.parent);
positionElementName = position.parent.name;
}
model.insertContent(icmsNote, position, null, {
setSelection: "after"
});
});
}
}
I want to pass data to my mixin's method, and then display it in my component. Something like:
//component A
mixins: [mixinOne],
data(){
return{
val = null
}
},
mounted(){
this.mixinMethod('good value', this.val);
}
//mixinOne
mixinMethod(valOne, valTwo) {
valTwo = valOne;
}
And in my template I want to display val:
// component A
<template>
{{val}}
</template>
I have written the above code and it doesn't work. It returns null for {{val}}! So basically I want to see 'good value' in my component for {{val}} which is setup through my mixin. How can I do that?
You Should put your Data section in mixin then change it and render it in your component.
// MmixinOne
data () {
return {
val = null
}
},
methods: {
mixinMethod (valOne, valTwo) {
valTwo = valOne
}
}
// Component A
<template>
{{val}}
</template>
<script>
import MmixinOne from './MmixinOne'
export default {
mixins: [MmixinOne],
mounted () {
this.mixinMethod('good value', this.val)
}
}
</script>
Anyway you dont need a method to set value on "val".
you can just set your value directly in mounted:
mounted () {
this.val = 'good value'
}
I have a js file that exports a variable and increases it every second
let total = 0
setInterval(function() {
total++
}, 1000)
export { total }
and a Vue component that prints said variable.
<template>
<div id="app">
{{ total }}
</div>
</template>
<script>
import {
total,
} from "./worker";
</script>
how can I make total reactive?
It's not possible with value types because value types are passed by value (value is just copied). What you need is to pass a reference to an object...
counter.js
let counter = {
total: 0
};
setInterval(function() {
counter.total++;
}, 1000);
export default counter;
<template>
<div>
<h1>{{ counter.total }}</h1>
</div>
</template>
<script>
import cnt from "#/counter";
export default {
name: "HelloWorld",
data() {
return {
counter: cnt
};
}
};
</script>
Having some trouble with a custom Vue component using Vue Carousel(https://ssense.github.io/vue-carousel/) to build a slide from a node list in the index file. Some of the carousel data is read in through a data.json file, but I want to create a new slide based on an object containing a node list. So I believe I need to us v-for and then iterate through that object creating a <slide></slide> for each instance in the node list.
The NodeList is made in the mounted() lifehook, but Im not sure how to tie it to the component, ALSO still very new to Vue and I didn't build out this templating system. Any help would be appreciated!
import { Carousel, Slide } from 'vue-carousel';
let articles={};
export default {
name: 'ProductCarousel',
props: {
dnode: Object,
value: Object
},
components: {
Carousel,
Slide
},
data() {
return {
carousel: this.dnode,
product: articles
}
},
mounted() {
var _self = this;
var rowName = ".js-ep--" + _self.carousel.anchor;
let e4pRow = document.querySelector(rowName);
var productRows;
if (e4pRow && !window.isEditMode) {
productRows = e4pRow.querySelectorAll(".product-grid");
if (productRows) {
for (var len = productRows.length, i = 0; i < len; i++) {
articles[i] = productRows[i].querySelectorAll("article");
//console.log(articles[i]);
}
//console.log(articles);
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<section :id="carousel.anchor" :class="carousel.classList" >
<h1 v-if="carousel.header" v-text="carousel.header" />
<h2 v-if="carousel.subheader" v-text="carousel.subheader"/>
<p v-if="carousel.paragraphText" v-text="carousel.paragraphText" />
<carousel
:navigationEnabled="carousel.navigation"
:paginationEnabled="carousel.pagination"
:navigationNextLabel="carousel.navigationNextIcon"
:navigationPrevLabel="carousel.navigationPrevIcon"
:navigationClickTargetSize="carousel.arrowClickSize"
:perPageCustom="[
[640, carousel.numSlidesSmall],
[1024, carousel.numSlidesMedium],
[1920, carousel.numSlidesLarge]]">
<slide></slide>
</carousel>
</section>
</template>
import { Carousel, Slide } from 'vue-carousel';
let articles={};
export default {
name: 'ProductCarousel',
props: {
dnode: Object,
value: Object
},
components: {
Carousel,
Slide
},
data() {
return {
carousel: this.dnode,
product: []
}
},
mounted() {
var _self = this;
var rowName = ".js-ep--" + _self.carousel.anchor;
let e4pRow = document.querySelector(rowName);
var productRows;
if (e4pRow && !window.isEditMode) {
productRows = e4pRow.querySelectorAll(".product-grid");
if (productRows) {
for (var len = productRows.length, i = 0; i < len; i++) {
articles[i] = productRows[i].querySelectorAll("article");
//console.log(articles[i]);
}
//console.log(articles);
this.product = articles; //loop through product in your template
}
}
}
}
I have SceneList and SceneCard components. I am setting SceneCard's bg-color randomly in SceneList. And I want to pass the color code to SceneCard. But I am getting: Error in directive rainbow bind hook: "TypeError: Cannot set property 'bgcolor' of undefined". Could someone give the way how to properly set data in custom directives?
Here is my code:
SceneList:
<template>
<div id="scene-list">
<scene-card
class="scene-card-comp"
v-for="scene in scenes"
:key="scene.id"
:bgcolor="bgcolor"
v-rainbow>
</scene-card>
</div>
</template>
<script>
import SceneCard from './SceneCard.vue';
export default {
props: ['scenes'],
components: {
SceneCard
},
data() {
return {
bgcolor: null
};
},
directives: {
rainbow: {
bind(el, /* binding, vnode */) {
const bgColor = `#${Math.random().toString().slice(2, 8)}`;
el.style.backgroundColor = bgColor;
this.bgcolor = bgColor;
el.style.opacity = '0.5';
}
}
}
};
</script>
<style lang="less">
...
</style>
SceneCard:
<template>
<div id="scene-card" #click="changeBGColor">
</div>
</template>
<script>
export default {
props: ['bgcolor'],
data() {
return {
};
},
methods: {
changeBGColor() {
console.log('bgcolor change ', this.bgcolor);
}
},
};
</script>
You can change the properties of your component with el, if you use this you don't refers to the component.
el refers the HTML DOM and the component according to the doc (https://v2.vuejs.org/v2/guide/custom-directive.html)
rainbow: {
bind(el, /* binding, vnode */) {
const bgColor =`#${Math.random().toString().slice(2, 8)}`;
el.style.backgroundColor = bgColor;
el.bgcolor = bgColor;
el.style.opacity = '0.5';
}
}