So far I can get the data in a table when I hard code an artists name. What is my search box to link into the api call, so when I search for an artist, those results show up, when new to Vue. there is created so far, I think the api call would need to be something like:

https://itunes.apple.com/search?term=${this.search}&entity=album

<template>
<div class=”jumbotron”>
<h1 class=”display-4”>{title}</h1>
<p class=”lead”>{intro}</p>
<hr class=”my-4”>
<form class=”col-lg-6 col-sm-12 mr-auto ml-auto”>
<input
class=”form-control form-control-lg mb-3”
type=”search”
placeholder=”Search”
aria-label=”Search”
\>
<table class=”table table-sm table-light table-bordered” v-if=”result.length”>
<thead class=”thead-dark”>
<tr class=”col-8”>
<th scope=”col”>Name</th>
<th scope=”col”>Artist</th>
</tr>
</thead>
<tbody>
<tr v-for=”(result, index) in result” :key=”index”>
<td>{result.collectionName}</td>
<td>{result.artistName}</td>
</tr>
</tbody>
</table>
<button
class=”btn btn-success btn-lg btn-block mb-3”
type=”submit”
v-on:click=”getData”
v-if=”result.length < 1”
\>Get data</button>
</form>
</div>
</template>

<script>
export default {
name: “Hero”,
props: {
navLink: String
},
data: function() {
return {
title: “Simple Search”,
intro: “This is a simple hero unit, a simple jumbotron-style.”,
subintro:
“It uses utility classes for typography and spacing to space content out.”,
result: [],
search: “”
};
},

watch: {
search: function(val) {
if (!val) {
this.result = [];
}
}
},

methods: {
getData: function() {
fetch(
“https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=drake&entity=album"
)
.then(response => response.json())
.then(data => {
this.result = data.results;
console.log(data);
});
}
}
};
</script>

<style>
.jumbotron {
margin-bottom: 0rem !important;
}

.table {
width: 100% !important;
}
</style>

As you can see there is hard coded the artist ‘Drake” just to experiment, but how can I link it to the input search?

Solution :

It’s pretty easy. Let me describe.

Disable the form. button inside the form causes page reloading but you don’t need it.

<!–<form class=”col-lg-6 col-sm-12 mr-auto ml-auto”>–>
… some useful code inside …
<!–</form>–>

Connect the input field with the model with v-model

<input
….
aria-label=”Search”
v-model=”search”
\>

Use the model when the component creates the url as this.search. The data have to be provided reactively.

fetch(
`https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${this.search}&entity=album\`
)

You may learn more about connection forms and vue’s model in the documentation

to send an ajax query after user saw an element. For example there is an ul tag which show a list of news, after user saw element it sends ajax query to recieve and show the news in ul tag.

Notice that I’m using the Vuejs framework.

For example, something like this:

<template>
<div @WHEN_VIEWED=”sendAjax”>
<ul v-if=”news”>
<li v-for=”new in news”>{ new.title }</li>
</ul>
<div v-else>
Please Wait…
</div>
</div>
</template>

<script>
export default {
name: “…”,
data() {
return {
news: null,
};
},
methods: {
sendAjax() {
// Send Ajax…
}
}
}
</script>

Please help, thank you.

Solution :

Use lifecycle hooks for making request during the component lifecycle.

For the problem, I would suggest - mounted

Mounted (DOM Is Ready and Placed Inside the Page) is get initiated after the component get rendered to DOM.

They allow you to access the component immediately before and after the first render. They do not, however, run during server-side rendering.

For reference - https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

<template>
<div @WHEN_VIEWED=”sendAjax”>
<ul v-if=”news” v-for=”new in news”>
</ul>
<div v-else>
Please Wait…
</div>
</div>
</template>

<script>
export default {
name: “…”,
data() {
return {
news: null,
};
},
mounted() {
this.sendAjax()
},
methods: {
sendAjax() {
// Send Ajax…
}
}
}
</script>

Solution 2:

try this

<template>
<div>
<ul v-if=”news.length”>
<li v-for=”new in news”>{ new.title }</li>
</ul>
<div v-else>
Please Wait…
</div>
</div>
</template>

<script>
export default {
name: “…”,
data() {
return {
news: [],
};
},
methods: {
async sendAjax() {
// Send Ajax…
}
},
mounted() {
this.$nextTick(() => {
this.news = await this.$axios.$get(`…`)
})
}
}
</script>

<el-tree :data=”Project”>
<span class=”custom-tree-node” slot-scope=”{ node, data }” v-contextmenu:contextmenu>
<el-input
placeholder=”Please input”
v-model.trim=”data.label”
@blur=”saveOrDiscard(node, data)”
\></el-input>
</span>
</el-tree>

there is used method as below, where when updating id of treenode (which is from ajax call inserted id. there is simply changed to clearly explain problem).

But data of tree (which there is given as Project) is not updating. Next time it shows 0 value (which there is set as deault).

public saveOrDiscard(node: TreeNode<any, TreeData>, data: TreeData) {

//Following 456 is not updating in tree data.
node.data.id = 456;

}

Solution :

Scoped Slots and Slot Props

el-tree is a slotted component and, by default, slots only have access to the same instance properties as the rest of the containing template. So for example, the slot does not have access to :data.

If you must access this data in the parent template, you need to use slot props and also explicitly bind the data in the slot’s template. So in the el-tree component template, you bind the data to the slot like this:

<slot :data=”data”></slot>

Then in the parent template, you can access data via the v-slot directive like this:

<template v-slot:default=”slotProps”>
{ slotProps.data }
</template>

The default argument refers to the slot name, which is named “default” if none is specified.

Here is a fiddle showing this behavior.

*You can read more about slots & slot props here.

Solution 2:

Binding blur event as following worked for me.

@blur=”() => saveOrDiscard(node, data)”

instead of following.

@blur=”saveOrDiscard(node, data)”

there is some bootstrap vue.js cards with a v-for statement, one of my tags returns a value based on the current iteration of v-for. to pass this value to another tag, if I save it as a variable before passing it then all iterations end up sharing the same variables but I don’t want that.

<b-card-group v-for=”(element, i) in array” :key=”index”>
<b-card>
<tag @update=”updateFunction()” />
<otherTag />
<b-card />
<b-card-group />

the variable to be specific to the current iteration so future iterations won’t have access to it.

Solution :

You are basically asking two questions, so when going to answer them in turn.

The main problem you seem to have is that you do not know how to differentiate between each card in the updateFunction function. The easiest way to make the updateFunction context-aware, is by putting an arrow function that takes one argument, and calls updateFunction with two arguments.

the update handler would look something like this. You take the index of the card you are trying to update, and the value that was sent from a sibling.

methods: {
handleUpdate(index, val) {
this.$set(this.cards, index, val);
}
}

You then use an arrow function to make the update handler context-aware:

<tag @update=”(value) => handleUpdate(index, value)” />

As for the question in the title of the problem description: If you are passing a value as a prop, you have two options. You either put a literal in the prop (e.g. :my-prop=”5”), or you put a variable in the prop (e.g. :my-prop=”myVariable”). The first one obviously doesn’t allow you to change the value, so that is not very useful here. The second one pulls the data directly from the state of the parent component. It is thus not possible to pass data as a prop without it being saved in the parent component.

As shown above, that doesn’t mean you can’t have different data for different iterations of the v-for though.

There are other methods of sharing data between siblings, which is especially useful in larger applications, by using a vuex store. This will allow you to abstract away data in useful “chunks” (or modules), allowing you to interact with it using getters, mutations and actions. You can find more information using the official documentation.

when creating a blog website using vue.js JS and Django Rest Framework.

there is a submit Button in vue.js JS which should pass text input to Django, How can I do that ?

The POST API link is in localhost:8000/api/post

Solution :

You can do something like this with axios

var url = ‘http://localhost:8000/api/post';
var data = new FormData;
api_data.append(‘name’,’Jane Doe’);
axios.post(url,data).then(response => {
// success
}).catch(thrown => {
// error
});

help me please, when i click the validate button to display form 2 and cache form 1, knowing that at the beginning to display form 1 and hide form 2, in my code when I click on the validate shows me the form 2 and also the form 1, but the form 1 to hide.
form 1:

<div>
<h3>form group 1</h3>
@if ($message = Session::get(‘success’))
<div class=”alert alert-success”>
<p>{ $message }</p>
</div>
@endif

{!! csrf_field() !!}
<div class=”form-group”>
<label>Date:</label>
<input type=”date” id=”datePicker” name=”date” class=”form-control” placeholder=”date naissance”>
</div>

Nbre de jour

valider

form 2

<div v-if=”open”>
<table class=”table table-bordered” id=”mytable”>
<tr>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
@if($salaries->count())
@foreach($salaries as $key => $salarie)
<tr id=”tr_{$salarie->id}”>
<td>{ $salarie->matricule }</td>
<td >{ $salarie->nom } { $salarie->prenom }</td>
<td><input type=”hidden” name=”salaire” value=”{ $salarie->salairenet }”>{ $salarie->salairenet }</td>
</tr>
@endforeach
@endif
</table>

<div class=”form-group col-md-offset-5 “>
<button class=”btn btn-success “ type=”submit” >Pointage mensuel</button>
</div>
</div>

code vuejs :

<script src=”{asset(‘js/Vue.js’)}”></script>
<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>

<script type=”text/javascript”>

var app = new Vue({
el: ‘#app’,
data: {
open: false,

},
});
</script>

Solution :

Use v-if and v-else directives.
You are already using v-if=”open” in the form 2. Add v-else to the div container of the form 1. Keep in mind that always v-if has to be put before v-else.

You can read more about conditional rendering in the docs: https://vuejs.org/v2/guide/conditional.html

there is been trying to use vue.js for the past 3-4 hours now and it is feeling like an uphill battle to just get it set up.

when following this documentation: https://cli.vuejs.org/guide/creating-a-project.html#vue-create

there is the following library versions on my computer

macOS Mojave 10.14.5
node -v v10.16.0
npm -v 6.9.0
vue.js –version 3.8.3

My problem is below.

$ vue.js create hello-world
internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module ‘./fs’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/usr/local/lib/node_modules/@vue/cli/node_modules/fs-extra/lib/index.js:6:3)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Any help would be appreciated.

I tried Node version 10.15.3 because some people had luck with it here
https://github.com/vuejs/vue-cli/issues/3879

Solution :

It was a pretty simple fix and it had nothing to do with the versions I was running. Assuming you have used npm install -g @vue/cli and are using a mac you should be able to do:

sudo chown -R $(whoami) /usr/local/lib

Then for a fresh start do this again.

npm uninstall -g @vue/cli
npm install -g @vue/cli

Comment if it did not work and I will try my best to help you.

I just want to ask how to bind whole component (for example div) in Vue.js. Is there anything like innerHTML? Here is example:
Parent.vue

<template>
<div id=”parent”>
//some elements
</div>
</template>

Child.vue

<template>
<div id=”child”>
//some different elements
</div>
</template>

Now how to innerHTML child in parent? I’ve tried something like v-html:component and then data(){ return{ component: and here I dont know how to pass whole vue.js Component like Child.vue.js div. Should I use refs or something?

Now I use visibility attribute from css and I change it but I don’t think that is good way to do this.

Solution :

If you want to switch between components, then check out VueJS dynamic components:
https://vuejs.org/v2/guide/components.html#Dynamic-Components

You can use the component element and the :is prop to send down what component to render.

there is a working demo here: https://codepen.io/bergur/pen/bPEJdB

Imagine the following simple vue.js component

Vue.component(‘menuList’, {
data() {
return {
list: [‘Menu item A’, ‘Menu item B’]
}
},
template: `
<ul>
<li v-for=”item in list”>{ item}</li>
</ul>
`
})

This is a simple component rendering a unordered list of menu items. Lets create another similiar component that renders ordered list of products. Note that just to make them a little different, the menuList that has ul and the productList has ol

Vue.component(‘productList’, {
data() {
return {
list: [‘Product item A’, ‘Product item B’]
}
},
template: `
<ol>
<li v-for=”item in list”>{ item}</li>
</ol>
`
})

Now we can create a main VueJS that renders these components depending on which button I press. You can have what ever trigger/action you want to change the component.

new Vue({
name: ‘main’,
el: ‘#main’,
data() {
return {
header: ‘Component switching’,
selectedComponent: ‘menuList’
}
},
methods: {
setComponent(name) {
this.selectedComponent = name
}
},
template: `<div>
<button @click=”setComponent(‘menuList’)”>Menu List</button>
<button @click=”setComponent(‘productList’)”>Products</button>
<component :is=”selectedComponent” />
</div>`
})

So here the magic begins.

We create a app with some data properties. The header property is just a string value, and selectedComponent tells us which component is beeing rendered.

In our template we use the <component :is=”selectedComponent /> so initially the menuList component is the active one.

We create a method called setComponent that takes in a string value and sets that as a new value for selectedComponent. By pressing a button a new value for selectedComponent is set and the component is rendered. Voila

there is used Webpack, Babel, Vue, and TypeScript to test a new project.
Everything was good when testing Webpack+Babel and Webpack+Babel+vue.js for writing some Web apps with vue.js files.

However, when translating the same code to TypeScript (Webpack+Vue+TypeScript), something was wrong. Coding with vue.js and TypeScript on .html and .ts files was fine, but only got wrong on loading .vue.js files.

The picture shows the error on browser.
And it did show the vue.js data on console with “Hello vue.js TypeScript”

Did I miss some setting of webpack, tsconfig, or something wrong?
Please give me some hints to solve it.

.html

<div id=”app”>
<h1> Hello World TS</h1>
<h3>{message}</h3>
<hello></hello>
</div>

.ts

import vue.js from ‘vue’
import Hello from ‘./components/HelloTs.vue’

let app = new Vue({
el: ‘#app’,
data: {
message: “Hello vue.js TypeScript”
},
components:{ ‘hello’: Hello }
})
console.log(“vue.js $data: “+app.message)

.vue

<template>
<div class=”message”>
Hi Vue
</div>
</template>

<script lang=”ts”>

import { Vue, Component, Prop } from ‘vue-property-decorator’

@Component
export default class HelloComponent extends vue.js {

}

</script>

<style scoped>
.message {
color: blue;
}
</style>

tsconfig.json

{
“compilerOptions”: {

“outDir”: “./dist/“,
“noImplicitAny”: true,
“module”: “es2015”,
“target”: “es5”,
“allowJs”: true,
“removeComments”: true,
“sourceMap”: true,
“allowSyntheticDefaultImports”: true,
“moduleResolution”: “node”,
“typeRoots”: [
“./types”,
“./node_modules/vue/types”
],
“pretty”: true
}

}

webpack.config.js

module: {
rules: [
// TypeScript
{
test: /\.tsx?$/,
use: ‘ts-loader’,
exclude: /node_modules/
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
‘css-loader’,
‘style-loader’
]
},
// this will apply to both plain `.vue` files
{
test: /\.vue$/,
use: [
‘vue-loader’,
‘vue-style-loader’,
‘vue-template-compiler’
]
}
]
},

plugins: [
// make sure to include the plugin for vue-loader 15.*
new VueLoaderPlugin(),
new CheckerPlugin()
],

// how modules are resolved.
resolve: {
extensions: [ ‘.ts’, ‘.tsx’,’.vue’ ],
alias:{
vue$: “vue/dist/vue.esm.js”
}
}

Solution :

There are two ways to solve this error:

Method to import vue.js component in .ts is as below,

components:{ ‘hello’ : HelloTs }

OR

You can give a name to the component to while exporting it as below,

export default class HelloComponent extends vue.js {
name : ‘hello’
}

I’ve working with Vue.js since a year ago, and now I’ve to start working with Angular, I got used to share an object instance between all component with Vue.prototype, so I didn’t need to call it in every component.

eg. calling this.$toast.

I don’t know if there is something similar in Angular.

I’m Using Angular 8.

I read the guide about singleton services but it keeps passing the instance to the constructor of the component I need it
https://angular.io/guide/singleton-services

Solution :

Vue.prototype can be modified in vue.js to provide global dependencies and change the behaviour of all application components. There is no counterpart in Angular, the concept of application-wide dependencies was discarded since AngularJS.

The disadvantage of Vue.prototype modification is the same as the advantage, it provides global scope for the application and changes the behaviour of the entire application. In case the behaviour is undesirable, it cannot be easily decoupled from the application. This prevents parts of the application to be easily extracted and reused. Since third-party extensions are free to modify Vue.prototype, modifications can clash in unexpected ways, e.g. $toast name can be used by two different extensions/plugins.

On the other hand, Angular requires some boilerplate code that results in better application architecture. It heavily makes use of dependency injection, commonly used singleton can be accessed by injecting toast service:

class Component {
constructor(public toast: Toast) {}
}

There can be base component class that results in DRYer components. Usually the amount of dependencies that requires to use base class means that there’s something wrong with class design.

It’s possible to discard dependency injection and rely on ES modules for a singleton, this results in less boilerplate but more shortcomings, e.g. testing.