In the previous sandbox I was able to use the flight search tool directly within my vue.js js app. I was able to do this by passing the API key in a string. Since the changeover to the self service API when at a complete loss on how to implement the curl command in order to generate a token to use in my app. there is read the developer guide and it is spartan to say the least. It doesn’t provide any steps on how to incorporate this in to any existing app. Does anyone have any ideas on how to do this ?

Solution :

Did you check the authorization guide? The new version of the Amadeus API program implements the standard oauth2 process which is more secure than the API Key in the URL.

You have a curl example in the guide and examples in different languages.
You can check the GitHub organization as well to find more examples and different SDKs.

I’ve created a vue.js component js file that is loaded in my page to do a simple thing:

function CategoryProductViewModel() {
var props = {
id: Number,
attributes: [Array, Object],
categories: Array,
…
}

var data = function(){
return {
quantity: 1
}
};

var computed = {};
…

var methods = {};
…

return {
props: props,
computed: computed,
methods: methods,
template: “#category-product”
}
}

Vue.component(‘category-product’, new CategoryProductViewModel());

There’s then also some matching html markup in my page:

<script type=”text/x-template” id=”category-product”>
<li>bunch of html here that’s irrelevant</li>
</script>

This all works great. there is six components I’ve built like this that work fantastically together.

Can I/how would I translate these to .vue.js files, and ideally then compile those to a single .js file to be included in my page rather than several html templates and several .js file?

I know I’ll probably need vue-cli through npm but for the life of me I cannot figure out how to translate what I’ve written into .vue.js files in the src/dist folder structure.

If it helps, I’m using these as a sort of standalone front-end application piece inside a larger website running on PHP.

Solution :

First create the vue.js components.

CategoryList.vue

<template>
The HTML you have but make sure it has one parent node.
</template>

<script>
export default {
props: {
id: Number,
attributes: [Array, Object],
categories: Array,
},

data(){
return {
quantity: 1
};
},

computed: {

},

methods: {

},
}

</script>

Now to build it you will gave to use something like webpack,

Here’s my setup

package.json(you can remove a lot of this. I’m on mobile and typing is a pain )

{
“private”: true,
“scripts”: {
“build”: “webpack”,
“watch”: “webpack –watch –progress”,
“test”: “mocha-webpack –require ./resources/assets/js/tests/setup.js ./resources/assets/js/tests/**/*.spec.js”
},
“dependencies”: {
“@fortawesome/fontawesome-free”: “^5.3.1”,
“autoprefixer”: “^9.1.5”,
“axios”: “^0.18”,
“normalize.css”: “^8.0.0”,
“postcss-loader”: “^3.0.0”,
“vue”: “^2.5.17”,
“vuex”: “^3.0.1”
},
“devDependencies”: {
“@babel/core”: “^7.0.1”,
“@babel/polyfill”: “^7.0.0”,
“@babel/preset-env”: “^7.0.0”,
“@vue/test-utils”: “^1.0.0-beta.25”,
“babel-eslint”: “^9.0.0”,
“babel-loader”: “^8.0.2”,
“browser-sync”: “^2.24.7”,
“browser-sync-webpack-plugin”: “^2.2.2”,
“copy-webpack-plugin”: “^4.5.2”,
“css-loader”: “^1.0.0”,
“eslint”: “^5.6.0”,
“eslint-config-airbnb-base”: “^13.1.0”,
“eslint-loader”: “^2.1.0”,
“eslint-plugin-import”: “^2.14.0”,
“eslint-plugin-node”: “^7.0.1”,
“eslint-plugin-promise”: “^4.0.1”,
“eslint-plugin-standard”: “^4.0.0”,
“eslint-plugin-vue”: “^4.7.1”,
“expect”: “^23.6.0”,
“extract-text-webpack-plugin”: “^4.0.0-beta.0”,
“file-loader”: “^2.0.0”,
“ignore-styles”: “^5.0.1”,
“jest”: “^23.6.0”,
“jest-serializer-vue”: “^2.0.2”,
“jsdom”: “^12.0.0”,
“jsdom-global”: “^3.0.2”,
“mini-css-extract-plugin”: “^0.4.2”,
“mocha”: “^5.2.0”,
“mocha-webpack”: “^2.0.0-beta.0”,
“node-sass”: “^4.9.3”,
“sass-loader”: “^7.1.0”,
“svg-inline-loader”: “^0.8.0”,
“url-loader”: “^1.1.1”,
“vue-jest”: “^2.6.0”,
“vue-loader”: “^15.4.2”,
“vue-style-loader”: “^4.1.2”,
“vue-template-compiler”: “^2.5.17”,
“webpack”: “^4.19.0”,
“webpack-cli”: “^3.1.0”
}
}

webpack.config.js

const path = require(‘path’);

const CopyWebpackPlugin = require(‘copy-webpack-plugin’);
const { VueLoaderPlugin } = require(‘vue-loader’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const BrowserSyncPlugin = require(‘browser-sync-webpack-plugin’);

function resolve(dir) {
return path.join(__dirname, ‘./‘, dir);
}

module.exports = {
mode: process.env.NODE_ENV,
entry: [‘./resources/assets/entry.js’],
output: {
path: resolve(‘./public/‘),
filename: ‘js/app.js’,
},
module: {
rules: [
{
test: /\.(png|jp(e*)g)$/,
loader: ‘url-loader’
},
{
test: /\.(svg)$/,
loader: ‘svg-inline-loader’
},
{
test: /\.(css|sass|scss)$/,
use: [‘vue-style-loader’, MiniCssExtractPlugin.loader, ‘css-loader’, ‘sass-loader’],
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: ‘babel-loader’,
},
},
{
test: /\.vue$/,
use: [‘vue-loader’],
},
],
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({ filename: ‘css/app.css’ }),
new CopyWebpackPlugin([
{
from: resolve(‘resources/assets/images’),
to: resolve(‘public/images’),
toType: ‘dir’,
},
{
from: resolve(‘resources/assets/icons’),
to: resolve(‘public/icons’),
toType: ‘dir’,
},
]),
],
};

resources/assets/entry.js

require(‘@babel/polyfill’);
require(‘./js/app.js’);
require(‘./sass/app.scss’);

And in the app.is just do

import vue.js from ‘vue’;
import CategoryList from ‘./CategoryList.vue’;

Vue.component(‘CategoryList’, CategoryList);

const APP = new Vue({
el: ‘#app’,
});

Now on the html page you can just do <category-list></category-list>

That’s after building

E.g.
public/index.HTML

<HTML>
<head></head>
<body>
<main id=”app”>
<category-list></category-list>
</main>
<script src=”js/app.js” type=”text/javascript”></script>
</body>
</HTML>

Looking at the vue.js Documentation, I can’t understand how to call a function with arguments in Vue, using data already in the template.

For example,

JavaScript

var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
methods: {
reverse: function (word) {
return word.split(‘’).reverse().join(‘’);
}
}
})

HTML

<div id=”example”>
<p> { message } </p>
<p> { reverse( { message } ) } </p>
</div>

I know the HTML is wrong, but this is similar to what I’m looking to achieve.

Solution :

Code between { } is interpreted as javascript, so you can pass the variable directly to the function:

<p> { reverse(message) } </p>

Solution 2:

@Jerodev answer is correct, and it’s what you were looking for.

However, for the code snippet you pasted, a computed property is the way to go:

JS:

var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
reverse(){
return this.message.split(‘’).reverse().join(‘’);
}
}
})

HTML:

<div id=”example”>
<p> { message } </p>
<p> { reverse } </p>
</div>

In this way, the code is more performant, because the expression is cached, and arguably more clear, since you don’t need to call the method with the argument in the html.

there is a computed property function called: Total, this essentially calculates the name + value pairs of an array called prices, it’s for a quotation form whereby a running total is added up as a user progresses through a multi-step form, values are then pushed into an array to keep things clean.

This computed property allows me to echo the total on the page which is dynamically updated without any additional code, I can simply add total using handlebars to wherever on my page like so: { total }

The problem I’m now facing is that I also want the value of ‘total’ to be included in a separate array, or at least added to an array and I can’t seem to get it right.

The working code which gets the values of my prices array which is by default empty is as follows:

computed: {
total: function(){
var total = [];
Object.entries(this.prices).forEach(([name, value]) => {
total.push(value)
});
return total.reduce(function(total, num){
return total + num
}, 0);
}
}

to do add something like this to my computed property:

this.quote.totalPrice = total

I’ve tried:

computed: {
total: function(){
var total = [];
Object.entries(this.prices).forEach(([name, value]) => {
total.push(value)
});
return total.reduce(function(total, num){
return total + num
this.quote.totalPrice = total
}, 0);
}
}

I’m not getting anything with this?

Solution :

You can use a watcher to keep track of changes to the computed property and update any variables accordingly:

watch: {
total(newTotal) {
this.quote.totalPrice = newTotal
}
}

when very new to vue.js and there is read an article or two about it (probably vaguely).

Also, Since there is some understanding of react, I tend to assume certain things to work the same way (but probably they do not)

Anyway, I just started with Quasar and was going through the Quasar boilerplate code

In the myLayout.vue.js file, I see being used inside my template

<template>
<q-layout view=”lHh Lpr lFf”>
<q-layout-header>
<q-toolbar
color=”negative”
\>
<q-btn
flat
dense
round
@click=”leftDrawerOpen = !leftDrawerOpen”
aria-label=”Menu”
\>
<q-icon name=”menu” />
</q-btn>

based on my vaguely understanding, I thought for every component we are using to whom we need to pass props we need to import it as well but unfortunately I can’t see it in my import-script area

<script>
import { openURL } from ‘quasar’

export default {
name: ‘MyLayout’,
data () {
return {
leftDrawerOpen: this.$q.platform.is.desktop
}
},
methods: {
openURL
}
}
</script>

I would’ve thought the script to be something like

<script>
import { openURL } from ‘quasar’
import {q-icon} from “quasar”

or at least something like that but here we only have

import { openURL } from ‘quasar’

Also, Even if we remove the above snippet, our boilerplate app looks to be working fine so here are my two questions

Question 1: What is the use of import { openURL } from ‘quasar’ (like what it does)

Question 2: How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?

Solution :

How can template contain <quasar-icon> or <quasar-whatever> without even importing it in script tag?

There are two ways to import components. The first way (which I recommend, and being most similar to React) is to import the component and add it to the components option inside the component that you want to use it within.

App.vue

<div>
<my-component/>
</div>

import MyComponent from ‘my-component’

export default {
components: {
MyComponent
}
}

The second way is to import it globally for use within any vue.js component in the app. You need only do this once in the entry script of the app. This is what Quasar is doing.

main.js

import vue.js from ‘vue’
import MyComponent from ‘my-component’

Vue.component(‘my-component’, MyComponent)

What is the use of import { openURL } from ‘quasar’ (like what it does)

I’m not familiar with Quasar, so I can’t give you a specific answer here (I don’t know what openURL does). You should check the Quasar docs.

openURL is being used as a method here. Perhaps it is being called from somewhere in the template (which you have excluded from the question).

Solution 2:

A1) Import statement is 1 way (es6) way to split the code into different files and then import functions/objects/vars from other files or npm modules see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

A2) vue.js allows 2 mechanisms to register components. Global and local. Globally registered components does not have to be imported and registered in every component before use (in template or render fn). See URL from comment above https://vuejs.org/v2/guide/components-registration.html#Global-Registration

I’m using Vue.js (cli 3) to build a mock webbshop to practice. I got a javascript file with all the functions for buttons, the basket and the checkout.

Instead of copying all the code into my own vue.js app. How can I import the Javascript file without getting errors?

What I’ve tried:

Adding import into the main.js file in my vue.js App.(I read through this explanation but I honestly don’t understand fully what’s happening)

import webbshop from ‘@/assets/lib/js/webbshop.js’;
Object.defineProperty(Vue.prototype, ‘$webbshop’, { value: webbshop });

found here:
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

Putting a console.log(“Test from my webbshop.js”) in the beginning. <- works

I get this error in Chrome:

Uncaught TypeError: Cannot set property ‘innerHTML’ of null
at showBasket (webshop.js?709d:146)

I also get 21 errors in terminal of VS Code when saving the document.
eg.

error: ‘i’ is already defined (no-redeclare) at src/assets/lib/js/webbshop.js:105:18:
103 |
104 | // Loopa genom varor
\> 105 | for (var i = 0; i < basketItems.length; i++) {
| ^
106 | // Rkna ut kostnad och lgg till summa
107 | var itemCost = parseInt(basketItems[i].artCost);
108 |

or

error: ‘addToBasket’ is defined but never used (no-unused-vars) at src/assets/lib/js/webbshop.js:31:10:
29 |
30 | /* Lgg till i varukorg */
\> 31 | function addToBasket(el, id, name, cost, image, notify = false) {
| ^
32 |
33 | // Brja med en vara
34 | numOfItems = 1;

When I create a button with onclick=”addToBasket([some parameters])” it throws error:

Uncaught ReferenceError: addToBasket is not defined
at HTMLButtonElement.onclick ((index):16)

I also tried:

At the very end of main.js just to keep working and not getting stuck until I get an answer.

function loadjsfile(filename){
var fileref=document.createElement(‘script’)
fileref.setAttribute(“type”,”text/javascript”)
fileref.setAttribute(“src”, filename)
}

loadjsfile(“@/assets/lib/js/webbshop.js”)

It doesn’t load the file at all. But no errors.

From main.js

import vue.js from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import webbshop from ‘@/assets/lib/js/webbshop.js’;
Object.defineProperty(Vue.prototype, ‘$webbshop’, { value: webbshop });

Vue.config.productionTip = false

new Vue({
router,
render: h => h(App)
}).$mount(‘#app’)

It doesn’t have to be scalable or in other means the best solution. I just want a simple way how to import functions from my other file and have them globally accessible in each component of my vue.js project.

I read here
and I can’t imagine there is to put module.exports on from of each function in my external file. Or do I?

You need to export the testFunction before you can require it.

module.exports = function testFunction() {
// function code
}

Expectations:

to access all the functions in the external js file to use in other component.vue.js files throughout my app.

Actual results:

The browser reads the external js file but the functions don’t work.

Solution :

to add function(s) globally to vue.js you need to extended vue.js and write as plugin
it is pretty easy

link

do it as the fallow:
create file plugin.js

import webbshop from ‘@/assets/lib/js/webbshop.js’;

// MyPlugin its just a name change to whatever meet you needs.
MyPlugin.install = function (Vue, options) {
Vue.myGlobalMethod = function () {
webshop.dothis();
};

Vue.mySecondGlobalMethod = function (a,b,c) {
webshop.dothis(a,b,c);
};
…
}

now import it to the main vue.js file.

import vue.js from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import plugin from ‘./plugin’

Vue.config.productionTip = false

Vue.use(plugin)

new Vue({
router,
render: h => h(App)
}).$mount(‘#app’)

after that vue.js attach the custom methods to all vue.js instances.
and you can access it anywhere by simply refer it to a vue.js inner function.
in markup:

<h1 v-text=”mySecondGlobalMethod(1,2,3)”></h1>

in javascript:

const b = this.myGlobalMethod();

there is a little form, in which is a pop-up with options which can be selected via checkboxes.
there is to realise it with Vue.js and bootbox. when using the bootstrap-vue.js plugin.

When I run it I get the following error messages:

“Uncaught SyntaxError: Unexpected token < bootbox.min.js:1”

“Uncaught Error: $.fn.modal is not defined; please double check you have included the Bootstrap JavaScript library. See http://getbootstrap.com/javascript/ for more details. bootbox.js:584”

I installed the npm package. I added

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity=”sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity=”sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k” crossorigin=”anonymous”></script>
<script src=”bootbox.min.js”></script>

to the body of my index.html. And I added

var bootbox = require(‘bootbox’);

to the *.vue.js component.

<script>
import JQuery from ‘jquery’
let $ = JQuery
var bootbox = require(‘bootbox’);

export default {
name: ‘eingabe’,
data: function () {
return {
kundeUebertrag: ‘’,
ergebniseins: ‘’,
ergebniszwei: ‘’,
ergebnisstring: ‘’,
ergebnisstring2: ‘’,
kundeNummer: ‘’,
bereichNummer: ‘’,
eventNummer: ‘’,
siteId: ‘’,
obj: ‘’,
ergarray: [],
innerobj1: ‘’,
innerobj2: ‘’,
feldSichtbar: ‘none’

}
},

methods: {
aufrufeins: function() {
let vm = this;
let neueDaten = document.formular;
neueDaten.addEventListener(‘submit’,function(evt) {
evt.preventDefault();
});

vm.kundeUebertrag = vm.kundeMatomo;
$.getJSON(“/api/pruefung.php”, { kundeUebertrag:
this.kundeUebertrag}, function (result) {
vm.ergebniseins = result;
vm.ergebnisstring = vm.ergebniseins[0];
vm.ergebnisstring2 = vm.ergebnisstring.returnmeldung;
vm.obj = JSON.parse(vm.ergebnisstring2);
if(vm.obj.status == “neuanlage”)
{
vm.siteId = vm.obj.siteid;
}
if(vm.obj.status == “rueckfrage”)
{
for (var prop in vm.obj)
{
vm.innerobj1 = vm.obj[prop][0];
for (var props in vm.innerobj1)
{
vm.innerobj2 = vm.innerobj1[props][0];
console.log(vm.innerobj2.kunde)
vm.ergarray.push(vm.innerobj2);

}
}
vm.ergebniseins = vm.ergebnisstring2;
vm.feldSichtbar = ‘block’;
bootbox.prompt({
title: “Bitte einen Kunden auswhlen”,
inputType: ‘checkbox’,
inputOptions: [
{
text: ‘Choice One’,
value: ‘1’,
},
{
text: ‘Choice Two’,
value: ‘2’,
},
{
text: ‘Choice Three’,
value: ‘3’,
}
],
callback: function (result) {
console.log(result);
}
});

}
});
},

}
}
</script>

I expect the bootbox to appear, but nothing appears. Only error messages.
Is it in general possible to use Vue.js with bootbox? What do there is to do?

Solution :

First off, you’re mixing different types of “include” statements (import and require). You should stick with a single one.

You state that you use bootstrap-vue.js and yet you still include the “vanilla” Bootstrap javascript files. That seems wrong. Also, I don’t think bootstrap-vue.js uses jQuery so it probably won’t play nicely with bootbox.

Finally, you duplicate the “loading” of jQuery and bootbox. Both of them are “loaded” via Node and also with script tags. This is asking for trouble because both libraries will exist twice in different contexts. You don’t explain the build pipeline, but assuming it’s Webpack, the script tags should be removed in favor of “includes” in the js app.

My vue.js app for instance has this statement for Bootstrap:

import ‘bootstrap’;

When creating a vue.js project with typescript, two declaration files are included: shims-vue.d.ts and shims.tsx.d.ts.

//shims-vue.d.ts

declare module “*.vue” {
import vue.js from ‘vue’;
export default Vue;
}

And:

//shims-tsx.d.ts

import Vue, { VNode } from ‘vue’;

declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends vue.js {}
interface IntrinsicElements {
[elem: string]: any;
}
}
}

While creating a small project (without the vue.js CLI) I forgot to include the second (shims.tsx.d.ts) and my project compiles and runs as expected (without error).

I found this post about it:
https://github.com/vuejs/vue-cli/issues/1198, but was hoping for more clarification.

when just curious what this file does and why it is included? In other words, what I would have to do to “break” my app if I don’t include this declaration file.

Thanks!

Solution :

The first file helps the IDE to understand what a file ending in .vue.js is

The second file allows you to use .tsx files while enabling jsx sytnax support in the IDE to write JSX-style typescript code.

Final Edit/Solution: https://jsfiddle.net/up9xkhsm/1/

Is there such an event for v-select that I can key on when it is closed? Or some sort of a ‘timer’ I can set to remove validation errors after they occur?

This is the v-select when using:
https://vuetifyjs.com/en/components/selects

Edit: this outlines the issue:
https://jsfiddle.net/96vnLm7g/

to know when a user clicked on the v-select but did not select anything. It has to be possible, obviously, since the validation can pick up on this..

Solution :

Use an onChange prop to add the callback function, so you can check for the v-model assigned to v-select if has changed, to clear the validation errors. Or watch the v-model assigned to v-select for changes.

Using onChange:

<v-select :options=”options” :on-change=”cleanUpValidation” v-model=”selectModel” name=”some-select”></v-select>

And in VueJS

methods: {
cleanUpValidation(){
//do the cleanup
}
}

By default, onChange emits input event with value of selected option:

default: function (val) {
this.$emit(‘input’, val)
}

So you can use it also to catch the input event:

<v-select :options=”options” @input=”cleanUpValidation” v-model=”selectModel” name=”some-select”></v-select>

In VueJS

methods: {
cleanUpValidation(val){
//do something with selected option value or cleanup error
}
}

Or you can watch the model assigned to v-select:

watch: {
‘selectModel’ : function(){
//do the cleanup or something with this.selectModel
}
}

For onChange and other props see:
https://sagalbot.github.io/vue-select/docs/Api/Props.html

Same thing would apply for VuetifyJS’s v-select.

Edit:
Main goal was to clear validation errors when v-select is actually clicked.
v-select uses focus event within its onClick() method, to tell the VueJS that component is clicked, so that can be used to catch the click event:

<v-select
@input=”inputChanged”
v-on:change=”changeChanged”
label=”Select Item”
:items=”myItems”
required
:rules=”rules.requiredField”
@focus=”focusChanged”
\>
</v-select>

And in js:

methods:{
focusChanged(){
console.log(‘focusChanged ‘);
},
}

For last example: https://jsfiddle.net/c5moqweu/

And see https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.js

onClick

Method

I would like to create a todo-List app. Here is my Code:
HTML:

<div class=”divPadder”>
<input ref=”makePlaceholderEmpty” class=”inputBoxSize” type=”text” :placeholder=”placeholder”v-model=”task”>
<ul>
<li v-for=”(item,index) in this.tasks” :key=”index”>{item}</li>
</ul>
</div>
<button class=”button” v-on:click=”pushAndMakePCEmpty”>Submit</button>

script:

data() {
return {
placeholder:”put the notes here :)))”,
task: “”,
tasks: []
};

},
methods: {
pushAndMakePCEmpty() {
this.$refs.makePlaceholderEmpty.value = “”;
this.tasks.push(this.task);
}
}

My problem is as soon as I add the v-for part into my html code that my value doesn’t get updatet to a emtpy string as it should. If I comment the v-for part out, the value attribute gets updatet. Hope somebody sees problem here.

Solution :

I’ve made a quick snippet using what you’ve already made, I believe this fits the expectations.

Just try and run the snippet ;D

new Vue({
el: ‘#app’,
data() {
return {
placeholder:”put the notes here :)))”,
task: “”,
tasks: []
}
},
methods: {
pushAndMakePCEmpty() {
this.tasks.push(this.task);
this.task = “”;
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<div class=”divPadder”>
<input ref=”makePlaceholderEmpty” class=”inputBoxSize” type=”text” :placeholder=”placeholder”v-model=”task”>
<ul>
<li v-for=”(item,index) in tasks” :key=”index”>{item}</li>
</ul>
</div>
<button class=”button” v-on:click=”pushAndMakePCEmpty”>Submit</button>
</div>

The code itself should be self-explanatory, but to point out the changes I’ve made:

Removed the this from the v-for
Changed the way to reset the value from the input by using Vue’s v-model interface through changing task data