Software

Ok, so i built a little app to exercise what i've learned so far with vue, but theres some things that i want to do but have no idea HOW yet

<div class="container" id="app"> <div class="row"> <div class="col-xs-6 jumbotron"> <form class="form-horizontal" @submit.prevent> <p> <label>Name</label> <input id="inputName" type="text" class="form-control" v-model="dataToArray.name"> </p> <p> <label>Sex</label> <input type="radio" name="sex" value="male" v-model="dataToArray.sex"> Male <input type="radio" name="sex" value="female" v-model="dataToArray.sex"> Female </p> <p> <label>Select a Color</label> <select id="selectColor" class="form-control" v-model="dataToArray.color"> <option value="red">Red</option> <option value="blue">Blue</option> </select> </p> <p> <button class="btn btn-primary" @click="addToArray()">Add to Array</button> </p> </form> </div> <div class="col-xs-6"> <table id="table" class="table table-bordered" v-if="savedData.length > 0"> <thead> <th>Name</th> <th>Sex</th> <th>Color</th> <th></th> </thead> <tbody id="test"> <tr v-for="(data, index) in savedData" v-if="savedData[index].status"> <td>{{ data.name }}</td> <td>{{ data.sex }}</td> <td>{{ data.color }}</td> <td class="text-center"> <button @click="editThis(index)" class="btn btn-warning">Edit</button> <button @click="saveEdit(index)" class="btn btn-default">Save</button> <button class="btn btn-danger" @click="deleteThis(index)">Delete</button> </td> </tr> </tbody> </table> {{ dataToArray.id }} <br> {{ dataToArray.name }} <br> {{ dataToArray.sex }} <br> {{ dataToArray.color }} <br> {{ savedData }} </div> </div> </div> new Vue({ el: '#app', data:{ dataToArray: { id: null, name: '', sex: '', color: '', status: true }, savedData: [] }, methods: { addToArray(){ this.dataToArray.id = this.savedData.lenth; this.savedData.push(Object.assign({}, this.dataToArray)); }, deleteThis(index){ this.savedData[index].status = false; }, editThis(index, event){ document.getElementById("inputName").value = this.savedData[index].name; document.getElementById("selectColor").value = this.savedData[index].color; //check the form radio according to the current sex of the object }, saveEdit(index){ this.savedData[index].name = document.getElementById("inputName").value; this.savedData[index].color = document.getElementById("selectColor").value; //this.savedData[index].sex = get the new radio value } } });

This is the app:https://jsfiddle.net/myrgato/10uqa1e1/5/

The edit and save button, i wanted to hide the edit button and show the saved button when the edit button is clicked, and the otherway around when the save button is clicked.

Editing the sex value of the object, i cant get the new radio value (the checked one after i click edit and select a new one)

Hiding the table if there are no rows, i am able to do that at the first time by comparing it to the size of the looping array, but when i delete rows, i dont delete the objects from the array, i just change the status, so if add one object to the array and delete it, the row will be gone (shows only if status = true) but the table will not (because even tho there are no rows, the object still exists inside the array)

Can someone help me understand how to achieve this?

In this case, we want to filter the words in our input: <input type="text" class="form-control" placeholder="Write something..." v-model="todoInput"">

These are the banned words that we want to replace from the input

"banned", "apple", "banana",

Suppose this is my template:

<template> <div id="Test"> <transition name="fade"> <div class="row" id="RowOne"> <p>Lorem ipsum dolor odit qui sit?</p> </div> </transition> <transition name="fade"> <div class="row" id="RowTwo"> <p>Lorem ipsum dolor sit amet, consectetur.</p> </div> </transition> <transition name="fade"> <div class="row" id="RowThree"> <p>Lorem ipsum dolor sit amet, tenetur!</p> </div> </transition> </div> </template>

I want to display and animate RowOne, RowTwo and RowThree when it's in the displayed in the viewport, respectively. Like in the Laracasts website, the elements appear and animate when scroll position reaches the elements offset. Is it possible using Vue.js and javascript?

My view like this :

@foreach($leagues as $league) <a data-toggle="tab" @click="$refs.leagues.changeLeague({{ $league->id }})"> {{ $league->name }} </a> @endforeach ... <div class="tab-pane active"> <top-league class="slick" league-id="{{ $league_id }}" ref="leagues"></top-league> </div>

My top league component vue like this :

<template> <div class="row"> <div class="col-md-3" v-for="item in items"> <div class="panel panel-default"> <div class="panel-image"> <a :href="baseUrl+'/leagues/'+item.id+'/'+item.name" :style="{backgroundImage: 'url(' + baseUrl + '/img/leagues/'+item.photo+ ')'}"> </a> </div> </div> </div> </div> </template> <script> ... export default { ... props: ['leagueId'], mounted(){ setTimeout( function(){ $('.slick').not('.slick-initialized').slick({slidesToShow: 3, infinite: false}); } , 10000 ); }, created() { this.getTopLeague([{league_id: this.leagueId}]) // this is ajax if load first }, computed: { ...mapGetters([ 'getListLeague' ]), items() { const n = ['getListLeague'] return this[n[0]] // this is response ajax // exist 5 league } }, methods: { ...mapActions([ 'getTopLeague' ]), changeLeague(leagueId) { this.getTopLeague([{league_id: leagueId}]) // this is ajax if a link clicked setTimeout( function(){ $('.slick').not('.slick-initialized').slick({slidesToShow: 3, infinite: false}); console.log('test') } , 10000 ); } } } </script>

When loaded the first time, there are 5 items of data displayed in the form of sliders. And the slider works. But if I click the another tab. For example I click League B, the slider not works. Whereas the result of console.log('test') run

How can I solve it?

My vue component like this :

<template> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-3" v-for="item in items"> <!-- this is images slider --> </div> </div> </template> <script> export default { ... mounted() { this.getTopLeague([{league_id: this.leagueId}]) // this is ajax if load first setTimeout( function(){ $('.slick').slick({slidesToShow: 4, infinite: false}); } , 10000 ); // I set 10 seconds for the finished ajax process just started the slider }, ... methods: { changeLeague(leagueId) { this.getTopLeague([{league_id: leagueId}]) // this is ajax if a link clicked setTimeout( function(){ $('.slick').slick({slidesToShow: 4, infinite: false}); } , 10000 ); //I set 10 seconds for the finished ajax process just started the slider } } } </script>

If the code executed, there exist error like this :

Uncaught TypeError: Cannot read property 'add' of null at jQuery.fn.init.a.fn.slick

The error occurs after 10 second or ajax process finished

I set the slider to run after 10 seconds because if the ajax process has not finished there is an error

How can I solve this problem?

TLDR: Does anyone know of an elegant way to make sure a component injects its own <style>{...everything in ./dist/vue-COMPONENT_NAME.css}</style> element into the page, but only once? SSR friendly too?

I've been on the hunt for a good solution to this for over 2 days now; I'm building a Vue component that is likely to be used by mostly non-built, client side environments, included in the page via script tag:

<script src="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.js"></script>

And, normally you would just use a link tag to get the styles in there:

<link rel="stylesheet" href="https://unpkg.com/vue-COMPONENT_NAME/dist/vue-COMPONENT_NAME.css">

..but I would like remove the requirement to add the additional (possibly forgotten) link tag to the page. I would like for this component to be able to automatically inject its required styles into the page, so it is never displayed in an un-styled state.

This is a graphics focused component using a Canvas for display, and some of its internal logic is built on analyzing the clientBoundingRect of the top level DOM node - So having the styles that set its size and proportions at mount is imperative.

I am also planing on using this component myself via Nuxt, so I'm going to have to make sure that whatever solution I come to avoids the dreaded "The client-side rendered virtual DOM tree is not matching server-rendered content." error message.

So far, I have been loving how low-configuration the build with vue-cli has been:

vue build vue-COMPONENT_NAME.vue --prod --lib VueCOMPONENT

...but its output is always the two files:

./dist/vue-COMPONENT_NAME.js ./dist/vue-COMPONENT_NAME.css

Is there an argument or configuration prameter for vue-cli that would cause it to build the styles into ./dist/vue-COMPONENT_NAME.js? Has anyone done anything like this with vue-cli?

I am currently thinking about coding my first webapp. I would say i have beginner to intermediate coding skills in html,css,js,jquery node,sql and monogodb.

The problem is that i do not really know how to achieve my goal.

My goal is to built a responsive single page website, which gets the stock price from an api and display it on one card. Furthermore the user should be able to click on the plus button and add another card with an stock index he chose from a choosing form option.

Now what want to know is:

1. Is this an example for choosing a js framework like react, vue etc. and how can I accomplish my goal ?
2. I coded the api get request etc. in node and was able to print everything I want into the console log. How do I do the same thing but displaying it on my html page ?
3. How can I create these cards which are automatically getting added to the homepage ?
4. How can I save the data for each individual card? (especially without a login procedure...)?

I know these are quite easy questions but I really want to learn how to do it.

Please check the images below.

(check:

In bootstrap.js, I have this:

window.Vue = require('vue'); window.events = new Vue();

Now I would like to use vue-router as well purely to have access to this.$route. What is the easiest way to do this? I tried to follow the official documentation, but it's so much different than what comes with laravel:

const app = new Vue({ router }).$mount('#app')

Thank you!

I trying to get an object from Firebase database using axios, and when I getting data from it,I want to assign to my users array in vue data object. when i console.log this.users ,it has value, but when I trying print in DoM , its shows empty array.I try vm.$forceUpdate() ,so thinking maybe,it's just DoM,not getting updated.But it doesn't work.Thanks in advance for help.

var SeptCoh = [ { name: 'Example Name', description: 'This is an example object. Never used an object before? Easy, find this in the code, copy it (including the curly brackets) and fill out your details while keeping the remaining syntax intact', photourl: 'http://img.freepik.com/free-vector/business-people-with-speech-bubbles_1325-25.jpg?size=338&ext=jpg', learningjournal: 'http://yourplunkhere.smth', }, ]; var app = new Vue({ el: '#app', data: { user:{ name:'', description:'', photourl:'', learningjournal:'' }, users:[], cohort:SeptCoh, }, methods:{ //Posting data to Firebase submit(){ axios.post('https://september-cohort.firebaseio.com/users.json', this.user) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); }, //fetching data from Firebase fetchData(){ axios.get('https://september-cohort.firebaseio.com/users.json').then(function (response) { // console.log(response.data); // this.users = response.data; // console.log(this.users); const resultArray = []; for(let key in response.data){ resultArray.push(response.data[key]); } this.users = resultArray; console.log(this.users); }) .catch(function (error) { console.log(error); }); }, }, //Triggering fetching method. created(){ this.fetchData(); }, //watching for changes in users array watch:{ users:function(){ var vm = this; setTimeout(vm.$forceUpdate(),1000); } } }); <!DOCTYPE html> <html> <head> <title>SEPCO: Elium September Cohort Page</title> <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> </head> <body> <div class="pimg"> <div class="ui two column centered grid"> <h1 class="ui column inverted black center aligned header"><i class="fa fa-graduation-cap" aria-hidden="true"></i>SEPCO <br> <hr> <em>Elium September Cohort Page</em></h1> </div> </div> <div class='ui container'> <br> <br> <br> <h2 class="ui center aligned header">Welcome</h2> <p id='introduction'>This is the collaborative page of the Elium September cohort. This is the beginning of a collaborative document and it <b>urgently needs your input!</b> So please go into the code, and make this page prettier, smarter, more content rich and of course more JavaScript-enriched.</p> <i>Our clan name on codewars.com: SEPCO</i> <div id='countdown'> <!-- who wants to code up a count-down to the startdate of the bootcamp?? --> </div> <hr> <h2 class="ui grey center aligned header"> Basics of how we want to prepare together.</h2> <hr> <ol class="ui list"> <li> Meet, decide on milestones togehter, then share how far you got e.g. using polls in Slack (for example "Did everyone finish watchandcode.com course?")</li> <li> Scheduled hangout time for 2 hours everyday where people will be online working/studying which is non-mandatory. (doodle invite #1) <ol> <li>Suggestion Flo: paste link here?</li> </ol> </li> <li> A Code Wars problem once a week every Friday starting Sept 28th. (doodle invite #2) answer will be on plunkr</li> <li> Share your plunker/codepen/glitch sites! There's two ways how we recommend doing this: <ol> <li> We will use these codesharing-site accounts to share to the group what we have learned ( Share fun projects! And Code wars problems after completion)</li> <li> Make a learning journal where you write down what you learned and what your personal goals are, this is also the ideal place to link to any other plunker/codepen/glitch creation you've made. The URL to this learning journal should be put into your object (see Part 3. below)</li> </ol> </li> <li> HTML and CSS discussed more in 2 weeks (because this can be learned towards the end)</li> </ol> <h2 class="ui grey center aligned header">Shared Milestones</h2> We want to get the following done by September 10th. <ul> <li>DECIDED: Complete practical javascript ("PJS") on watchandcode</li> <li>PROPOSED: Additional JavaScript (define list of skills/concepts)</li> <li>REVISIT first week of August: Basic HTML</li> <li>REVISIT first week of August: Basic CSS</li> <li>REVISIT first week of August: GIT</li> </ul> <br> [this section needs more love] <h2 class="ui grey center aligned header"> Info on the cohort members & links to their learning journals on plunker </h2> The cohort is an array and every member is an object. Dive into the sourcecode and add an object with your details. And then we asap need someone who makes this section better/prettier (see sourcecode) <br> <br> <!-- loop and create Info card Using Vue.js --> <div id="app"> <!--Starting vue instance here--> <div class="ui link cards"> <div v-for="people in cohort"> <div class="ui card"> <div class="image"> <img :src="people.photourl"> </div> <div class="content"> <div class="header">{{people.name}}</div> <div class="description"> <p>{{people.description}}</p> </div> <br> <div class="extra content"> <span class="left floated"> <i class="arrow down icon"></i> <a :href="people.learningjournal">Plunker</a> </span> </div> </div> </div> </div> </div> <br> {{users}} <br><br><br> <!-- Form for making users cards --> <form class="ui form"> <div class="field"> <label>First/Last-Name:</label> <input type="text" v-model="user.name" placeholder="First/Last Name"> </div> <div class="field"> <label>Description of You:</label> <textarea v-model="user.description"></textarea> </div> <div class="field"> <label>Picture Url:</label> <input type="text" v-model="user.photourl" placeholder="Picture Url"> </div> <div class="field"> <label>Plunker Url:</label> <input type="text" v-model="user.learningjournal" placeholder="Plunker Url"> </div> <button class="ui button" @click.prevent="submit">Submit</button> </form </div> <!--end of vue instance--> <div id="footer"><hr></div> <!-- Your web-app is https, so your scripts need to be too --> <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <script src="client.js"></script> </div> </body> </html>

I'm setting the selected option of a v-select using v-model, so when I open the screen it already comes with the result. That's working fine until I set autocomplete property in v-select tag. When I do that the option is chosen but the select doesn't show it. Is there any issue with the autocomplete feature or it's the standard behavior for the component?

Vue.use(Vuetify); var app = new Vue({ el: '#app', data() { return { selected: 2, country: [{ text: 'USA', value: 1 }, { text: 'Canada', value: 2 }, { text: 'England', value: 3 }, { text: 'France', value: 4 }] } } }) <script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" /> <script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> <div id="app"> <v-app> <v-card class="grey lighten-4 elevation-0"> <v-card-text> <v-container fluid> <v-layout row wrap> <v-flex xs4> <v-flex> <v-subheader>Origin Country</v-subheader> </v-flex> <v-flex> <v-select :items="country" v-model="selected" label="Select" class="input-group--focused" single-line bottom autocomplete> </v-select> </v-flex> </v-flex> <v-flex> Selected: {{ selected }} </v-flex> </v-layout> </v-container> </v-card-text> </v-card> </v-app> </div>

Here it is jsfiddle link: https://jsfiddle.net/vcmiranda/huj9L4bq/ Thanks.

I have a Vue component named searchbox and I want the users to get redirected to display the results once they type the name and click the search button. I am using axios to make the http request. Here's my template:

<form @submit.prevent="searchResult"> <div class="field has-addons searchbox"> <div class="control"> <input class="input" type="text" id="search" name="q" placeholder="Search a video..." @keyup.enter="searchResult" v-model="searchData"> </div> <div class="control"> <button class="button is-primary"><i class="fa fa-search"></i></button> </div> </div> </form>

Here's my script in the Vue file:

<script> export default { data() { return { searchData: null, }; }, methods: { searchResult() { axios.get('/search?q=' + this.searchData); } } } </script>

Here's my search controller:

class SearchController extends Controller { public function index(Request $request) { return view('search.index'); } }

However, I can not see the redirection. How do I redirect from vue component to another route in laravel??

Is vue-router necessary or we can follow any other method??

I tried to implement this:

https://vuejs.org/v2/examples/select2.html

I am not making SPA, although I am using Vue components in my page.

[Vue warn]: Error in mounted hook: "TypeError: $(...).select2 is not a function"

found in

I get this error

Error in mounted hook: "TypeError: $(...).select2 is not a function" found in <Select2> at C:\laragon\www\lara\resources\assets\js\components\ui\Select2.vue

I include both select2 and my vuejs in the html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script src="{{ asset('js/content_type_blocks.js') }}?{{ str_random(7) }}"></script>

I wonder why do I get the error that select2 is not a function?

According to the VueRouter documentation, it is possible to add meta fields and globally restrict routes based on their values.

After attempting an implementation as outlined, I get an error: ReferenceError: record is not defined (line 46)

Which corresponds to this line:

if (!hasCookies(record.meta.cookies)) {

Here is the file that has the router-guard logic:

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path : '/authenticate/:id', component : require ('./components/authenticate.vue'), redirect: '/here', }, // can only get here if the passcode has been filled out { path : '/client/create', component : require('./components/createClientForm.vue'), meta : { cookies: ['passcode_cookie'], // need passcode to be able to create the client redirect: '/authenticate/1' // dummy value here for now } }, // can only get here if passcode and client form have been completed { path : '/test/:id', component : require('./components/runTest.vue'), meta : { cookies : ['passcode_cookie', 'client_cookie'], redirect : '/client/create' } } ]; const router = new VueRouter ({ routes, mode: 'history', }); function hasCookies (cookies) { return cookies.every(cookie => document.cookie.indexOf(cookie) !== -1); } router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.cookies)) { // this route requires cookies, check if cookies exist if (!hasCookies(record.meta.cookies)) { next({ path : record.meta.redirect || '/', }) } else { next(); } } else { next(); // make sure to always call next()! } }); const app = new Vue ({ router }).$mount('#app');

Any idea on what I may be doing wrong?

I'm making my simple social network with Node.JS, Hapi and Vue. I want to have Facebook login. As Fcebook Auth can't be done in SPA I came up with the following method.

1. Add login button to SPA. This is link to server route which will redirect request to Facebook
2. User will log in with facebook
3. Server will return simple HTML page which will include JWT, and store JWT in browser's session store
4. that simple page will than redirect browser to SPA

Is there better way to do it? Should I somehow place JWT in SPA index.html page??

I'm using a Vue JS method to test if data exists in firebase and if so evaluate the v-if to true I have a method that works, but then it keep looping. I just learned that altering the state can cause the v-for to re-render and thus the infinite loop, but I'm having trouble applying this knowledge to my method. Here is my issue:

HTML:

<li v-for="..."> <button v-if="isAttending(report)" @click="qualify(report)"> View </button

And the Method:

isAttending (report) { var theUser = this.user.user.displayName console.log(theUser) reportsRef.child(report['.key']).child('participants').once('value', function (snapshot) { if (snapshot.hasChild(theUser)) { console.log('exists') } }) }

How can I make this so it doesn't alter state preventing the loop?

I'm not sure if this is possible, but I'm trying to get a method to return truthy falsely for a v-if statement. But right now the button always is true for some reason.

Here's my HTML(Pug):

button(v-if="!isAttending(report)" @click="qualify(report)") RSVP

And my JS (Vue)

methods: { isAttending (report) { var that = this var theReport = report if (that.$firebaseRefs.attending.child(that.user.user.displayName).child(theReport['.key']).child('going') === true) { return true } else { return false } }

Essentially what I am doing it asking firebase is something exists and returning true or false. I'm not convinced this is the best way but have yet to come up with better.

There is an online exam, this exam has 5 pages, there is a count down timer (120 seconds) and 4 questions in each page. After 120 seconds user is automatically transferred to the next page, or he can click on next button before that.

What I want is preventing user from seeing other pages. All pages has to be visible for maximum 120 seconds. User should not be able to click on back button and see previous pages. Is this possible at all ?

I want to create this app with Vuejs and vue-router but I don't know how to implement this with vue-router, I have done some research but got not much result!

Or maybe I should not use vue-router, and use my own simple router, for example :

$("#page1").show(); $("#page2").hide(); $("#page3").hide(); . . // after 120 secs $("#page1").hide(); $("#page2").show(); $("#page3").hide(); . . // this is not secure at all !

I am using Laravel5.4 and VueJs, There is an Ajax request for every question that user answers. Any thoughts are appreciated. Thank you.

I'm creating a gallery with the #listGroup bootstrap component. I want when one of the albums in the click change the active #listGroup even the page is reload or refresh. How do I fix this?

HTML/PHP

<div class="container"> <div class="row"> <h2 class="col-xs-12">Gallery</h2> </div><!-- /row --> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="list-group" id='listGroup'> <?php include 'dismin/pages/koneksi.php'; if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }; $start_from = ($page-1) * 12; $sql = "SELECT * FROM tbl_album where status='process' ORDER BY albumid DESC LIMIT $start_from, 12"; $rs_result = mysql_query ($sql); ####### Fetch Results From Table ######## $no=0; while ($row = mysql_fetch_assoc($rs_result)) { $aid=$row['albumid']; $aname=$row['name']; ?> <a href="gallery?id=<?php echo $aid; ?>" class="list-group-item" v-bind:class="{ 'active' : isSelected(<?php echo $no; ?>) }" v-on:click="selected = <?php echo $no++; ?>"><?php echo $aname; ?></a> <?php } ?> </div> </div><!-- /col --> <div class="col-xs-12 col-sm-9"> <div class="row"> <?php include "dismin/pages/koneksi.php"; $aid = $_GET['id']; $sql = "SELECT * FROM tbl_gallery where aid=$aid and status='process'"; $num_rows = mysql_num_rows(mysql_query($sql)); ####### Fetch Results From Table ######## $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { $gimage=$row['gimages']; ?> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="dismin/pages/galeri/aksi/gupload/<?php echo $gimage; ?>"> </a> </div><!-- /col --> <?php } ?> </div><!-- /row --> </div><!-- /col --> </div><!-- /row --> </div><!-- /container -->

JAVASCRIPT

new Vue({ el: '#listGroup', data: { selected: 0 }, methods: { isSelected: function (i) { return i === this.selected } } })

I have the following ajax response from the API:

{ "data": [ { "id": 16, "sender_id": 1, "text": "Test", "created_at": "2017-07-21 15:42:08", "updated_at": "2017-07-21 15:42:08", "sender": { "data": { "id": 1, "name": "John Doe", "email": "john@doe.co", "mobile": "+1875446799976", "photo_url": "https://example.co/storage/profiles/0H6Rkwsrlns0R1PY03Mta2qIhdPhV7N19jaagH3m.jpeg", "first_login": 0, "uses_two_factor_auth": false, "two_factor_reset_code": null, "current_team_id": 1, "stripe_id": null, "current_billing_plan": null, "billing_state": null, "vat_id": null, "trial_ends_at": "2017-06-27 10:06:05", "last_read_announcements_at": "2017-06-27 10:06:05", "created_at": "2017-06-27 10:06:05", "updated_at": "2017-06-28 10:40:07", "tax_rate": 0 } }, "buildings": { "data": [ { "id": 4, "team_id": 1, "name": "Oasis", "created_at": "2017-06-30 13:15:30", "updated_at": "2017-06-30 13:15:30", "pivot": { "sending_id": 16, "building_id": 4 } } ] }, "messages": { "data": [ { "id": 316, "sending_id": 16, "recipient_id": 42, "provider_id": "0B0000006A1ABFEF", "info": null, "status": "delivered", "price": "0.07500000", "error_text": null, "created_at": "2017-07-21 15:42:08", "updated_at": "2017-07-21 15:42:21", "recipient": { "id": 42, "name": "John Doe", "email": "john@doe.co", "mobile": "198765456789", "types": [ "Inhabitant" ], "building_id": 4, "created_at": "2017-07-01 07:21:52", "updated_at": "2017-07-01 07:21:52", "deleted_at": null } } ] } }, ... }

But when I try to display recipient name like the following:

<tr v-for="sending in sendings"> <td>{{ sending.created_at | moment }}</td> <td><div style="width: 300px">{{ sending.text }}</div></td> <td> <div v-for="building in sending.buildings.data" v-if="sending.buildings.data"> {{ building.name }} </div> </td> <td> <ul> <li v-for="message in sending.messages.data" v-if="sending.messages.data"> {{ message.recipient.name }} </li> </ul> </td> </tr>

I get this error in console and no row is display at all: TypeError: Cannot read property 'name' of undefined

It's odd because displaying Building name works just fine, the only difference is recipient is one level deeper..

Any thoughts?

Trying to access the value of the key with Vue.js which is new for me. I want to use the key as the id and access the title with key.title or something similar if possible. Here is the code I am trying:

HTML

<ul id="all"> <li v-for="(song,key) in songs" :class="{ active: song.isActive }" v-bind:id="key"> {{ key.title }} //Hound Dog </li> </ul>

Javascript

var vm = new Vue({ el: '#all', data: { songs: [ a:{ title:'Hound Dog', lyrics:'You aint nothing but a hound dog, crying all the time', isActive: true }, b:{ title:'Long Gone', lyrics:'I am long gone today', isActive: false } ] } })