Why is json being output this way?

Question

Vue.js

Vue accesses the database via axios ajax

<input type="button" value="OK" @click="allRecords()">
  </div>
  <div>{{ users }}</div>
  <div v-for="user in users" :key="user">
      <div>{{ user.id}}</div>
     <div>{{ user.name}}</div>
      <div>{{ user.quantity}}</div>
      <div>{{ user.price}}</div>
      <div>{{ user.logo}}</div>
      <div>{{ user.dates}}</div>
    <div>{{ user}}</div>
      <hr>
    </div>
</div>
<div></div>
<script>
var app = new Vue({
  el: '#app',
  data() {
    return {
      users: '',
      userid: 0,
    message: 'Привет, Vue!'
  }
  },
  methods: {
   allRecords() {
      axios.get('ajax/ajax.php')
      .then(function(response){
        app.users = response.data
    console.log(response.data)
      })
      .catch(function(error){
        console.log('Error')
      })
    }
  }
})

php handler

$sql = "SELECT * FROM `parts_tbl`";
$res = mysql_query($sql);
if(!$res) {
  echo "Ошибка запроса mysql";
}
else {
  //echo "OK";
}

while(($a = mysql_fetch_assoc($res)) == true) {
    $rowArr[]=$a;
  }
echo json_encode($rowArr, JSON_UNESCAPED_UNICODE);

Возвращает
[{"id":"1","name":"деталь 1","quantity":"44","price":"444","logo":"AA4","dates":"2018-10-27 18:33:49"},{"id":"2","name":"деталь 2","quantity":"22","price":"222","logo":"BB5","dates":"2018-10-27 18:33:49"}]

v-for

<div v-for="user in users" :key="user">
      <div>{{ user.id}}</div>
     <div>{{ user.name}}</div>
      <div>{{ user.quantity}}</div>
      <div>{{ user.price}}</div>
      <div>{{ user.logo}}</div>
      <div>{{ user.dates}}</div>
    <div>{{ user }}</div>
      <hr>
    </div>

выводит пустые строки, а
<div>{{ user }}</div>
выводит побуквенно
скрин
https://yadi.sk/i/BCXGkLX13fHclg

Answer 1

выводит побуквенно

Тот факт, что вы ожидали иного, ясно говорит следующее: вы не знаете, что такое json. Не понимаете, что это строка. Что сам json и объекты, получаемые при его парсинге - не одно и то же.
Строки v-for так и перебирает - "побуквенно". То есть, значениями user являются строки единичной длины. Ну а свойств id, name, price и т.д. у строк нет, отсюда пустота там, где вы выводите свойства элементов users.

Answer 2

Попробуйте JSON.parse заюзать
т.е эту конструкцию
app.users = response.data
console.log(response.data)
заменим на эту
app.users = JSON.parse(response.data);
console.log(app.users[0]); // get info only first user
console.log(app.users[0].id); // get id first user

Answer 3

Кусок кода из проекта:

//==
//== Axios: create instance
//== ======================================= ==//

Vue.use(VueAxiosBridge, axios.create({
    baseURL         : '/api',
    timeout         : 0,
    responseType    : 'json',
    responseEncoding: 'utf8',
    headers         : {
        'X-Requested-With': 'XMLHttpRequest',
    },

    // Reject only if the status code is greater than or equal to 500
    validateStatus: status => status < 500,
}));

Vue.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Вам следует обратить внимание на строку responseType : 'json',.
Данная настройка укажет axios, что полученный ответ нужно распарсить как json и вернуть в виде объекта.
Как в вашем случае указать конфиг, можно прочесть в документации https://github.com/axios/axios#request-method-aliases (вторым параметром axios.get())

Answer 4

jsonObj=JSON.parse(jsonString);