We Keep Coding

How to set v-model dynamically in nested v-for loop?

I am trying to make a word search game using vue, and to make the grid I have done the following:
<table>
<tr v-for="n in rows">
<td v-for="i in cols" v-model="cols[n][i]">{{randomLetter()}}</td>
</tr>
</table>
I want to be able to set the value for each td using v-model but my approach is not working to dynamically set the v-model.

How do I display an array / object using ng-repeat

I have an array that looks like the following:
I want to display that using angularJS ng-repeat, showing both count and value for each.
This is currently the HTML and angular I have but nothing displays.
I also don't need to display the 0 index in the array, I want to start from 1 if possible.
<tr ng-class="" ng-repeat="x in vm.data | filter: searchArray">
<td>{{x.value}}</td>
<td>{{x.count}}</td>
</tr>

I went back to the basics and understood that an ng-repeat is just a loop in javascript, and what do you need to do if you want to access data in JavaScript if your array is multi-dimensional? well you do a nested for loop, and thats exactly what I'm doing in this case.
This is the updated html/angularjs that displays the data I need:
<tbody>
<tr ng-repeat="x in vm.data">
<td ng-repeat="y in x">{{y.value}} {{y.count}}</td>
</tr>
</tbody>
Thank you guys again!

Using ng-repeat object value as javascript parameter

I have a code that looks something like this:
<tr ng-repeat="obj in objs">
<td onClick = "someFunction({{obj.val1}})">{{obj.val2}}</td>
<td>{{obj.val3}}</td>
</tr>
The colums properly show val2 and val3, but the onclick method I'm trying to define doesn't work as the code doesn't translate from {{obj.val1}} into the proper value, it stays as is.
How do I properly send {{obj.val1}} onto the onClick event? Can this be done?

Use ng-click instead of onClick and assign the someFunction() function to angular $scope

Yes it can be done.Using ng-click
<tr ng-repeat="obj in objs">
<td ng-click = "someFunction(obj.val1)">{{obj.val2}}</td>
<td>{{obj.val3}}</td>
</tr>
You don't need to bind the values using {{}}, you can simply put them as function parameters.

In angular they already have directive called ng-click The ngClick directive allows you to specify custom behavior when an element is clicked. which used for click event. And You don't need to bind the parameter {{}}
then your code come like
<tr ng-repeat="obj in objs">
<td ng-click = "someFunction(obj.val1)">{{obj.val2}}</td>
<td>{{obj.val3}}</td>
</tr>

Do this :
<td onClick = "someFunction(obj.val1)">{{obj.val2}}</td>

How to pass a template variable to event handler method in Vue js

This code:
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(1)">
is working well in Vue js.
But this:
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
Doesn't seem to work well. Resulting in an error. So how can I pass a environmental variable like contact.index into the event method?

<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(contact.index)">
or simply
<tbody v-for="contact in contacts">
<tr #click="selectContact(contact.index)">
v-on directive will evaluate the string as an expression. You don't have to insert extra {{ }}.

Adding to Leo's answer, if you are looking for getting index of v-for loop than you have to do following:
<tbody v-for="(contact, index) in contacts">
<tr v-on:click="selectContact(index)">

Second code resulting error that is related to interpolation
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
Why this happening ? Because you are using templating part {{}} into v-on:click directive, which VueJS see as normal aka vanilla JS, so it can't accept the templating here {{}} - mustaches.
Previous answers give you correct and working solutions.

How to dynamically write $index as part of ng-model name?

I am trying to use $index in an ng-repeat to dynamically add an index to my ng-model. I can't figure out how to type it so it shows up right.
This is the closest I've gotten, except the single quotes still show up:
<tr ng-model="arrayOfArrays" ng-repeat="x in exes">
<th>{{x}}</th>
<td ng-model="arrayOfArrays['{{$index}}'][0]">{{}}</td>
<td ng-model="arrayOfArrays['{{$index}}'][1]">{{}}</td>
<td ng-model="arrayOfArrays['{{$index}}'][2]">{{}}</td>
</tr>
What I want the end result to be:
<tr ng-repeat="x in exes">
<th>{{x}}</th>
<td ng-model="arrayOfArrays[0][0]">{{}}</td>
<td ng-model="arrayOfArrays[1][1]">{{}}</td>
<td ng-model="arrayOfArrays[2][2]">{{}}</td>
</tr>
I just want to know how to write the ng-model name so that the incrementing value of $index is included as part of the ng-model name. The only way I am getting the value to appear is by using extra single quotes that appear to become part of the ng-model name.

Couldn't you use
ng-repeat="(index, x) in exes"
Then index would be incremented with each "x" you go through. Also, you could use :
ng-repeat="x in exes track by $index"
This should increment $index as you currently have.