Question

我刚刚开始使用Vue.js，这是我第一次尝试使用Vueify和Browserify。我创建了这个简单的组件来从Json生成一个表，但是我的组件应该显示的div是空的，我没有得到任何错误，Vue dev工具扩展显示我的Json包含所有正确的数据。我可能在这里做了一些非常愚蠢的事，但我看不到它......

我的index.html：

<div class="content">
        <div id="vuePersonagens"></div>
        <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/components/Personagens/build.js"></script>
</div>

Personagens.vue：

<template>
<div>
  <h1>Personagens</h1>
  <table v-for="personagem in personagens" class="table table-striped table-hover">
    <thead>
      <th>Nome</th>
      <th>Raça</th>
      <th>Classe</th>
      <th>Level Efetivo</th>
    </thead>
    <tbody>
      <tr>
          <td>{{ personagem.nome }}</td>
          <td>{{ personagem.raca }}</td>
          <td>{{ personagem.classe }}</td>
          <td>{{ personagem.level }}</td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script lang="ts">
  import * as Vue from 'vue'
  import Component from 'vue-class-component'

  @Component({
      props: {
        personagens: [{ "nome": String, "raca": String, "classe": String, level: Number}]
      }
  })
  export default class Personagens extends Vue {
        personagens: [{ "nome": String, "raca": String, "classe": String, level: Number}]
  }
</script>

start.js：

var Vue = require('vue')
var Personagens = require('./Personagens.vue')

new Vue({
   el: '#vuePersonagens',
   data: {
     personagens: [{ "nome": "Banjo", "raca": "Lizarkin", "classe": "Bard/Cleric", level: 8}]
   }
})

的package.json：

{
  "name": "cleave",
  "version": "1.0.0",
  "description": "JSON",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://hsaldanha@bitbucket.org/hsaldanha/cleave.git"
  },
  "author": "Heitor Saldanha",
  "license": "ISC",
  "homepage": "https://bitbucket.org/hsaldanha/cleave#readme",
  "dependencies": {
    "@types/es6-promise": "0.0.32",
    "vue": "^2.3.4",
    "vue-class-component": "^5.0.1"
  },
  "devDependencies": {
    "vueify": "^9.4.1"
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Console showing empty DIV

Vue devtools shows my Json

Answer 1

您需要在<?php $num1 = 1; $num2 = 2.2; $num3 = 21; $num4 = 50.233; $mysql = "SELECT * FROM posts WHERE longitude < :longitude AND latitude < :latitude"; $stmt = $conn->prepare($mysql); $stmt->bindParam(':latitude', add($num1, $num2)); $stmt->bindParam(':longitude', add($num3, $num4)); $stmt->execute(); //Returns all posts in an associative array. $result = $stmt->fetch(PDO::FETCH_ASSOC); function add($var1, $var2) { return $var1 + $var2; }文件中注册Personagens.vue组件。

您可以全局执行此操作：

start.js

或在根组件中：

Vue.component('personagens', Personagens);

然后，您还需要在模板中实际包含组件标记：

new Vue({
  el: '#vuePersonagens',
  components: { personagens: Personagens },
  data: {
    ...
  }
})

Vueify的组件模型为空

1 个答案: