Software
How to integrate custom meta tags with Rails 5 + webpacker + Vue.js
Just like in title: What is the proper way to integrate SEO stuff like Facebook OpenGraph tags in apps that use rails backend API (installed with webpacker) with a framework like Vue?
This is how part of my config/routes.rb looks like:
namespace :api, defaults: { format: :json } do namespace :v1 do resources :posts, only: [:index, :show] end end get '/', to: 'front#index', format: false get '/*path', to: 'front#index', format: falseFor now app is designed in the way, where all requests on front-end part are handled by vue-router.
My layouts/application.html looks almost, like on the attached snippet:
<html> <head> <%= javascript_pack_tag 'front' %> <%= stylesheet_pack_tag 'front' %> </head> <body> <div id="app"> <%= yield %> </div> </body> </html>My question is, what is the proper way to manage stuff like Facebook Open Graph when there is no straight forward access to <head> section?
I can't use fairly default rails stuff like content_for because everything happens inside script.
Or maybe am I wrong? Missing something fancy, important here?
It would be grateful to get any advice, thanks.
Trying to use v-on:blur for making disappear a context menu...but it doesn't work
I am coding a simple context menu in vue.js. When I do a right click on a peculiar element, it opens the menu (using @contextmenu.prevent).This works.
But when I click outside of the menu I want it to disappear. This doesn't work... I am using v-on:blur for this, also tried @blur . None of them doesn't work. Here is my html :
<!-- my context menu --> <ul class="context-menu" ref="contextMenuTrack" v-if="openedMenu === 'contextMenuTrack'" v-bind:style="{top: top, left: left}" v-on:blur="closeMenu()"> <li v-on:click="removeTrack(project.structure.tracks.indexOf(targetOfMenu));closeMenu()">delete track</li> </ul> <div> [ ...... stuff here ......] <!-- Where the menu is called--> <li class="track" v-for="track in project.structure.tracks"> <div class="track-name-row"> <li @contextmenu.prevent="openContextMenuTrack(track,$event)" v-on:click="expandTrack(project.structure.tracks.indexOf(track))" class="track-color-viewer"></li> [ .... other li tags .....] </div> </li> [ ...... stuff here ......] </div>Here is the datas used for the menu of my Vue component:
data() { return { //the kind of menu which is opened openedMenu: undefined, //the coordinate of the menu top: "0px", left: "0px", //the element which is targeted by the menu targetOfMenu: undefined }; },And here are the methods used for the menu in my Vue.js component :
methods: { setMenu(top, left) { this.top = top - 170 + "px"; this.left = left + "px"; }, // opening menu : calling set menu whith x and y openContextMenuTrack(track, event) { this.openedMenu = "contextMenuTrack"; this.targetOfMenu = track; this.$nextTick((() => { this.$refs.contextMenuTrack.focus(); this.setMenu(event.y, event.x); }).bind(this)); }, closeMenu() { this.openedMenu = undefined; this.targetOfMenu = undefined; } }Charts.js with vue not drawing charts after fetching data
This is how json response looks like [[61,57,34],[1,1,3]] I want to use the first array for labels and the second for data.
If I set labels and data inside app manually it works though.
eg labels: ["q", "w", "e"] data: [1, 5, 10]
Vue.component('chart', { props: ['labels', 'data', 'type'], template: ` <canvas style="width: 512px; height: 256px"></canvas> `, mounted: function () { new Chart(this.$el, { type: this.type, data: { labels: this.labels, datasets: [{ label: '# of Votes', data: this.data, borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }) } }); new Vue({ el: '#app', data: { message: "test", labels: [], data: [] }, methods: { fetchData: function() { this.$http.get('/admin/fetch_data').then(res => { this.labels = res.body[0]; this.data = res.body[1]; }) } }, beforeMount() { this.fetchData() } });component on page
<div id="app"> {{message}} <chart :labels="labels" :data="data" type="bar"></chart> </div>The data seems to be loaded but there're no chart bars on page.
`npm --version` takes a long time when called within nodejs program
Within vue.js empty project created with vue CLI I have a script build/dev-server.js that starts the app.
Its first line is require('./check-versions')() which blocks my system for couple of minutes. I identified that this part blocks it:
function exec (cmd) { return require('child_process').execSync(cmd).toString().trim() }and in this case cmd argument is npm --version. execSync seems to be a problem here which invokes var result = spawn_sync.spawn(options); from child_process.js with the following options:
length:5 __proto__:Array(0) [, …] 0:"C:\Windows\system32\cmd.exe" 1:"/d" 2:"/s" 3:"/c" 4:""npm --version"" envPairs:Array(63) ["ALLUSERSPROFILE=C:\ProgramData", "APPDATA=C:\Users\mmilic\AppData\Roaming", "ChocolateyInstall=C:\ProgramData\chocolatey", …] file:"C:\Windows\system32\cmd.exe" killSignal:undefined shell:true stdio:Array(3) [Object, Object, Object] windowsVerbatimArguments:trueInvoking npm --version on command line returns ASAP. Also, on one computer switching from corporate to wireless network connection resolves the problem.
Any ideas ?
vue.js jquery - access to global function from jQuery method
I am making a simple SPA application in vue.js and I use some jQuery methods. Problem is, I can't use vue's methods inside of jQuery statement. For example: I implemented easyAutocomplete pack for auto completing my input field and need 4 events:
- v-on:click="addReceiver"(on button 'add') - done
- v-on:enter="addReceiver" (on input field) - done
- click on list item - done
- enter on list item - done
For now my code (without unnecessary things) looks like this:
export default { data() { return { contacts: [], receivers: [] } }, mounted() { this.fetchMessages(); }, methods: { fetchMessages() { axios.get('api/messages').then(response => { this.contacts = response.data.contacts; var options = { data: this.contacts, getValue: "name", list: { match: { enabled: true }, onClickEvent: function() { var name = $("#to").getSelectedItemData().name; $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); //this.receivers.push(name); CANT DO THAT ALSO!!! }, onKeyEnterEvent: function() { var name = $("#to").getSelectedItemData().name; $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); } } }; $("#to").easyAutocomplete(options); }); }, addReceiver(){ var name = $("#to").val(); $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>"); } } }As you can see I need to duplicate my code in many places, because I cant use function addReceiver() inside for example onClickEvent: jquery list function.
Thank you for any help!
Accessing and filtering child components defined in a Vue.js component's <slot>
I'm in the process of implementing a combined select dropdown and searchbox component for a UI library I'm writing, using Vue.js to drive interactions, but I'm running into a problem with how Vue.js seems to handle communication between parent and child components.
Basically, what I'm aiming to achieve is to allow users of the library to define search-select elements in HTML using something like this:
<search-select> <search-option value="foo">Foo</search-option> <search-option value="bar">Bar</search-option> <search-option value="baz">Baz</search-option> <search-option value="foobar">Foobar</search-option> </search-select>My template for the search-select component looks like this:
<template> <div class="search-select"> <div class="placeholder" ref="placeholder"></div> <ul class="dropdown"> <input type="text" placeholder="Type to filter..." v-on:input="updateFilter" > <slot></slot> </ul> </div> </template>The idea is that the search-select component will add a text input box above the specified inputs, which the user can type in to filter the options that can be selected. The finished component would look something like this.
However, from what I can tell in the documentation, Vue.js doesn't provide any direct way for me to access the properties of the child components from within the parent, nor any way to listen for click events or similar from children within a parent's <slot>.
This means that I don't have a way to filter visibility of the children based on the user's input, or to update the value of the search-select component when a user clicks on one of the children.
The Vue.js documentation mentions ways to pass events from child components to parents, but none seem applicable to elements defined within slots - it appears that parents can only listen for events from components explicitly defined within them.
How would one implement the type of two-way communication between parent and child components required for this use case, without violating any Vue.js best practices related to sharing information between components?
Spotify Track Clone
I am trying to clone the Web Spotify, my project is in Github. The framework that I've been using is Vue.js.
Now I am trying to clone this page, where user can click on the track and the corresponding track in the playlist will be played. Now I can get an object for each track, and there is a preview url, e.g. "preview_url" : "https://p.scdn.co/mp3-preview/4839b070015ab7d6de9fec1756e1f3096d908fba", and I can used the audio tag to play the preview of the music.
The problem is that I don't know how to play the given track when the corresponding play button is clicked.
<track-display v-for="track in tracks" :track-title="TITLE" :artist="artist" :album="ALBUM"></track-display>track-display is an component that I created which is suppose to contain track title, artists and album, which looks like:
Now, I have an array tracks which stores all the track-objects. How am I going to detect which track element is clicked and play the corresponding track?
v-if doesn't recognize value from array of object
I'm working on a vueJS file and have a component :
<div class="panel-heading" v-on:click="displayValue(feature.id)"> {{ feature.nom }} </div> <div class="panel-body" v-if="getDisplay(feature.id)"> foo </div>my function displayValue(id) :
displayValue(id){ for(let i =0; i<this.product_site.displayFeatures.length;i++){ if (this.product_site.displayFeatures[i].idFeature === id){ this.product_site.displayFeatures[i].show = !this.product_site.displayFeatures[i].show } } console.log(this.product_site.displayFeatures) },First I am not very happy with that. I trie to do a .find but it didn't work :
this.product_site.displayFeatures.find(function(a){ a.idFeature === id }).show = trueBut I had an error telling me can not read 'show' of undefined
and my function getDisplay(id)
getDisplay(id){ this.product_site.displayFeatures.forEach(function(a){ if(a.idFeature === id){ return a.show } }) }same as before if I try with a find.
Anyway, I thought it would work with that, but when I do console.log(this.product_sites.displayFeatures) I have the array with the modified value but foo is not shown
filter object by key and its items
I have an object that I would like to filter it's keys..
Im trying to filter the object by an ID, like so:
let myKeys = Object.keys(data).filter(function(key) { //console.log(data[key]); if(parseInt(key) === parseInt(vm.system_id)) { return data[key]; } }); console.log(myKeys);This works, partialy - im getting the key, however, im not getting all the data/items under this item im filtering out
The object im filtering is one similar to this one:
{ "646": [{ "id": 52144, "timestamp": "2017-08-17T14:10:23Z", "type": "alarm", "code": 210, "title": "", "description": "", "remedy": "", "appeared": "2017-08-17T14:10:09Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "CG-MX19D7K5C1", "system_id": 646, "system_device_id": 458, "stream": "cu351.alarm_code" } ], "693": [{ "id": 51675, "timestamp": "2017-08-16T13:59:55Z", "type": "alarm", "code": 215, "title": "", "description": "", "remedy": "", "appeared": "2017-08-16T13:59:57Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Demo 07122016", "system_id": 693, "system_device_id": 371, "stream": "cu351.alarm_code" }, { "id": 51677, "timestamp": "2017-08-16T13:59:57Z", "type": "alarm", "code": 214, "title": "", "description": "", "remedy": "", "appeared": "2017-08-16T13:59:59Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Demo 07122016", "system_id": 693, "system_device_id": 371, "stream": "cu351.alarm_code" } ]}
Gulp + Browserify + Vueify ERROR: "Failed to mount component: template or render function not defined"
I am using Gulp, Browserify and Vueify and I am getting this error in console.
You can see it on my Github page
Here is my gulpfile.js:
"use strict" import gulp from 'gulp'; import bower from 'main-bower-files'; import path from 'path'; import { $, isDev, browserSync, getData, reload, orderJSVendor, browserSyncConfig, jadeConfig, root, svgSpriteConfig, imageminConfig } from './config'; import browserify from 'browserify'; import vueify from 'vueify'; import babelify from 'babelify'; import source from 'vinyl-source-stream'; gulp.task("plugins", () => { console.log(getData()) }) gulp.task("build:css", () => { return gulp.src(root.styles.src) .pipe($.plumber()) .pipe($.if(isDev, $.sourcemaps.init())) .pipe($.sass()) .pipe($.autoprefixer({browsers: ['> 1%', 'last 5 versions', 'Firefox ESR','ie 8', 'ie 7']})) .pipe($.if(!isDev, $.csso())) .pipe($.rename({suffix: ".min"})) .pipe($.if(isDev, $.sourcemaps.write('.'))) .pipe(gulp.dest(root.styles.dist)) }); gulp.task("build:html", () => { return gulp.src(root.views.src) .pipe($.plumber()) .pipe($.data(getData)) .pipe($.jade(jadeConfig)) .pipe($.versionAppend(['html', 'js', 'css'])) .pipe($.if(!isDev, $.htmlmin({collapseWhitespace: true}))) .pipe(gulp.dest(root.views.dist)) }); gulp.task("build:js", () => { return browserify({ entries: 'app/scripts/main.js'}) .transform(babelify) .transform(vueify) .bundle() .pipe(source('build.js')) .pipe(gulp.dest(root.scripts.dist)) .pipe(reload({stream: true})) }); gulp.task("build:vendor", () => { let filterJS = $.filter(['**/*.js', '!**/html5shiv/**/*.js', '!**/respond/**/*.js'], { restore: true }), filterLib = $.filter(['**/html5shiv/**/*.js', '**/respond/**/*.js'], { restore: true }), filterCSS = $.filter('**/*.css', { restore: true }), options = { output: { comments: "some" }, nameCache: null, toplevel: false, ie8: false, }; return gulp.src(bower()) .pipe($.plumber()) .pipe(filterJS) .pipe($.order(orderJSVendor)) .pipe($.concat('vendor.min.js')) .pipe($.if(!isDev, $.uglify(options))) .pipe(gulp.dest(root.scripts.dist)) .pipe(filterJS.restore) .pipe(filterLib) .pipe($.concat('ie.min.js')) .pipe($.if(!isDev, $.uglify(options))) .pipe(gulp.dest(root.scripts.dist)) .pipe(filterLib.restore) .pipe(filterCSS) .pipe($.concat('vendor.min.css')) .pipe($.if(!isDev, $.csso())) .pipe(gulp.dest(root.styles.dist)) .pipe(filterCSS.restore) }); gulp.task("build:sprite", () => { return gulp.src(root.sprite.svg) .pipe($.plumber()) .pipe($.cache($.imagemin(imageminConfig.icons))) .pipe($.svgSprite(svgSpriteConfig)) .pipe(gulp.dest(root.sprite.dist)) .pipe(reload({stream: true})) }) gulp.task("copy:images", () => { return gulp.src(root.images.src) .pipe($.plumber()) .pipe($.changed(root.images.dist)) .pipe($.cache($.imagemin(imageminConfig.images))) .pipe(gulp.dest(root.images.dist)) .pipe(reload({stream: true})) }); gulp.task("copy:files", () => { return gulp.src(root.files.src) .pipe(gulp.dest(root.files.dist)) }); gulp.task("copy:fonts", () => { return gulp.src(root.fonts.src) .pipe(gulp.dest(root.fonts.dist)) }); gulp.task("run:server", () => { global.isWatching = true; browserSync.init(browserSyncConfig); gulp.watch( root.watch.styles, ['build:css', reload] ) gulp.watch( root.watch.views, ['build:html', reload] ) gulp.watch( root.watch.scripts, ['build:js']) gulp.watch( root.watch.bower, ['build:vendor', reload]) $.watch( root.watch.svg , $.batch((event, done) => { gulp.start('build:sprite', done); })); $.watch( root.watch.images , $.batch((event, done) => { gulp.start('copy:images', done); })).on('unlink', imgpath => { let srcIMG = path.relative(path.resolve(root.images.basedir), imgpath), distIMG = path.resolve(root.images.dist, srcIMG); return gulp.src(distIMG).pipe($.clean()) }); }); gulp.task("build:clean", () => { return gulp.src(root.clean) .pipe($.clean()) }); gulp.task("build", () => { $.runSequence("build:clean", "build:css", "build:html", "build:js", "build:vendor", "build:sprite", "copy:images", "copy:fonts", "copy:files"); }); gulp.task("default", ["run:server"]);
And this is my app.js:
var Vue = require('vue') var hello = require('../views/components/hello.vue') new Vue({ el: '#wrapper', components: { hello: hello } })
And finally this is screenshot of my project structure:
Why am I getting this error? I will appriciate any help. Thank you.
Vue sharing state between sibling components
I probably do not want to use vuex for state management yet as it is probably overkill for now. I took a look at https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication. I am using single file component so I am not sure where do I define the shared bus such that both components will have reference to it.
var bus = new Vue()ChildA.Vue
watch: { sideNav: (newValue) => { bus.$emit('sideNav-changed', newValue) } }ChildB.Vue
created () { bus.$on('sideNav-changed', data => { console.log(`received new value: ${data}`) // update own copy here }) }Parent.Vue
<template> <childA> </childA> <childB> </childB> </template>I want to watch any changes of sideNav on ChildA and emit it to ChildB to update its own value.
Why won't VueJS invoke methods from the created() function?
Learning VueJS and trying to do a simple API call on component load to put a list of repos onto my page. When I call and set the this.repos from the created() method, no problem. But if I set it as a method and then call it from this.getRepos nothing happens. No error, nothing. What am I missing about VueJS?
This works:
data: () => ({ msg: 'Github Repos', ok: 'Im practically giving away these repos', repos: [], }), methods: { }, async created() { const repos = await axios.get('https://api.github.com/orgs/octokit/repos'); this.repos = repos.data.map(repo => `<div class="box"><a href="${repo.html_url}"> ${repo.name} </div>`, ); },This DOES NOT work:
data: () => ({ msg: 'Github Repos', ok: 'Im practically giving away these repos', repos: [], }), methods: { getRepos: async () => { const repos = await axios.get('https://api.github.com/orgs/octokit/repos'); this.repos = repos.data.map(repo => `<div class="box"><a href="${repo.html_url}"> ${repo.name} </div>`, ); }, }, created() { this.getRepos(); },Any ideas? Thanks!
Lint SCSS in VueJS single file component with Webpack
I'm trying to lint the SCSS styling in the <style> tag of VueJS single-file componens using Webpack. I'm attempting to call the webpack loader scsslint-loader as preLoader within the vue-loader task of my Webpack build.
The single-file vue.js component....
<template lang="pug"> ... </template> <script> ... </script> <style lang='scss'> @import '/scss/core/colors'; .email { color: $primary_color; width: 320px; } </style>In Webpack(2.5) the vue-loader config looks like...
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { preLoaders: { 'scss': 'scsslint-loader', 'sass': 'scsslint-loader' }, loaders: { 'scss': 'vue-style-loader!css-loader!sass-loader', 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' }, } } ] },The result from running Webpack...
undefined:1 No such file or directory @ rb_sysopen - ; ^ SyntaxError: Unexpected token N in JSON at position 0 at JSON.parse (<anonymous>) at linterResults (C:\wamp\www\spreadless\node_modules\scsslint-loader\dist\scsslint-loader.js:20:28) at C:\wamp\www\spreadless\node_modules\scsslint-loader\dist\scsslint-loader.js:57:13 at ChildProcess.exithandler (child_process.js:277:5) at emitTwo (events.js:125:13) at ChildProcess.emit (events.js:213:7) at maybeClose (internal/child_process.js:897:16) at Socket.stream.socket.on (internal/child_process.js:340:11) at emitOne (events.js:115:13) at Socket.emit (events.js:210:7) at Pipe._handle.close [as _onclose] (net.js:549:12)Questions are...
- Am I calling the scsslint-loader correctly as a vue-loader{preLoader} within the Webpack config?
- If so any idea on what is causing the no file error
vuejs include javascript library in spa
i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1. first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2. second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them // your local files export default { //export your file your_function(){ // defined your function ... } } // now your can use it // your component file <script> import local_file from 'your_file_relative_path' //now you can use it in the hook function created(){ //or other hook function local_file.your_function() //call your function } </script>but that mean i need to change every javascript library that i use...
3. third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.
Vue js component does not work when VeeValidate is declared
My problem is that I use a Vue js plugin to generate forms dynamically: https://github.com/icebob/vue-form-generator, and when I use VeeValidate the plugin stops working with no errors. However, the moment I remove Vue.use(VeeValidate) , it works fine. So what could be causing the problem? Here is my code:
import VeeValidate from 'vee-validate'; import VueFormGenerator from "vue-form-generator"; Vue.use(VeeValidate, { errorBagName: 'vErrors' }); Vue.use(VueFormGenerator); new Vue({ el: '#action-button-settings', data: { model: { id: 1, name: "John Doe", }, schema: { fields: [{ type: "input", inputType: "text", label: "ID (disabled text field)", model: "id", readonly: true, disabled: true },{ type: "input", inputType: "text", label: "Name", model: "name", placeholder: "Your name", featured: true, required: true }] }, formOptions: { validateAfterLoad: true, validateAfterChanged: true }, }, methods:{ init() { console.log('hi'); }, } });HTML:
<template> <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator> </template>Also, as you can see I rewrote VeeValidator computed property errors to vErrors because it was causing a conflict between the two libraries. Please help.
Send email after purchase without CMS
I'm creating a website using Bootstrap and VueJS. I need to implement a payment platform where an email is sent to the customer when he buys a product. Which is the best method to do that ? I saw that mailchimp is a good alternative, but I'm not using a CMS. Any idea ?
How do i bind select box with input in vuejs?
I try to bind select box with input so like this I have a select box with some option when selected that information will go to input and when some one put information in the input it should bind in select.Can't figure it out.
<div class="col-md-2 text-center"> <select class="form-control" v-model="selected"> <option v-for="item in inventory" :value="item" :key="item.id"> @{{ item.name }} </option> </select> <p> @{{ selected.id}} </p> </div> <input v-model="inputBind" placeholder="," type="text" class="form-control">and
new Vue({ el:'#app', data:{ inputBind:'', inventory: [ {name: 'MacBook Air', id: 1}, {name: 'MacBook Pro', id: 2}, {name: 'Lenovo W530', id: 3}, {name: 'Acer Aspire One', id: 4} ], selected: 2 }, created: function() { this.selected = this.inventory.find(i => i.id === this.selected); },Is the way I'm writing my Vue components correct?
Here's the way I am currently writing my Vue components. E.g.
<template> <NavBar></NavBar> <div class="Footer"> <div class="left"> <p>I'm a cool footer on the Left!</p> </div> <div class="middle"> </div> <div class="right"> <p>I'm a cool footer on the Right!</p> </div> </div> </template> <script> import NavBar from './NavBar.vue'; export default { name: 'Footer', components: { NavBar } data () { return { } }, methods: { } }My question is should I be writing my components like this instead? And if so, what is the difference?
Vue.component('my-component', { template: '<div>A custom component!</div>' }) new Vue({ el: '#example' })Delete a record from Ag-grid using rendered button in Vue file
I'm using an ag-grid to populate list records(rows) in a table. I'm trying to delete a record from the grid-table when the user clicks a "Delete" button in one of the cell. I'm able to add the "Delete" button to the grid but how can I capture the index of the clicked "Delete" in the table and remove that row.
table's grid options are defined in file specials.Vue
*function setGridOptions() { this.gridOptions = { columnDefs: [{ headerName: 'Model', field: 'scModel', editable: params => this.isCellEditable(params), newValueHandler: this.NewValueHandler, width: 120, }, { headerName: 'Delete ', width:50, field: 'delete', cellRenderer: deleteRecordCellRender, }, ], rowData: this.getInitialRowData(), headerHeight: 36, rowHeight: 28, suppressMovableColumns: true, suppressMenuMainPanel: true, suppressMenuFilterPanel: true, suppressMenuColumnPanel: true, suppressContextMenu: true, singleClickEdit: true, rowSelection: 'single', }; }*The 'Delete' column rendered from 'deleteRecordCellRender' defined in javascript file ag-gridFunction.js
*export function deleteSpecialRecordCellRender() {} deleteSpecialRecordCellRender.prototype.init = deleteSpecialRecordCellRenderInit; deleteSpecialRecordCellRender.prototype.getGui = deleteSpecialRecordCellRenderGetGui; function deleteSpecialRecordCellRenderGetGui() { return this.eGui; } function deleteSpecialRecordCellRenderInit() { console.log('deleteSpecialRecordCellRenderInit this: ', this); this.eGui = `<button class="btn btn-default btn-sm delete-row-button" rel="">Delete</a>`; }*delete-row-button function defined in specials.Vue file is
$('.delete-row-button').on('click', () => { console.log('made it'); console.log('scope: ', this); console.log('clicked row',$scope.gridOptions.api.getSelectedRows()) });But It's not getting the selectedRow due to a scope issue. How do I get the selected row index and delete after ?
Vuejs Component Route Dynamic Selection
I've got a Vue instance:
new Vue({ el: '#Application', router: Router, components: { 'ExampleDepartment', Application }, data: function() { return { } } });Inside of my application file, I import the template, sidebar action. Inside the template, I have the following:
<v-list-tile v-for="action in actions" :key="action.label" v-if="action.visibility == true"> ... </v-list-tile>Then inside, I have the following:
export default { watch: { $route: function() { this.getOrSetPageVisibility(); } }, methods: { getOrSetPageVisibility() { for(let index = 0; index < this.actions.length; index++) { if(this.actions[index].page == this.$router.currentRoute.name) { this.actions.$set(index, { visibility }, true); } } } }, data: function() { return { actions: [ { label: 'Add Sample', icon: 'add_circle', page: 'Sample', visibility: false } ] } } }So the issue, is every time the page switches I want to load a variation of menu items to the sidebar, but it won't let me modify the array. It complains that $set isn't valid or undefined, and it won't update the component on the change.
I can see that on the menu changes it executes my method through the watch, but fails when modifying the array.
How can I dynamically add to the menu based on selected page?