Question

我在Vue中非常陌生，我正在尝试遍历数组。不完全知道我在做什么错，但列表未显示在HTML上。这是下面的代码：这是一个通过路由器视图呈现的索引文件。

<template>
  <div class="index container">
    <div class="card" v-for="tournament in tournaments" :key="tournament.id">
      <div class="card-content">
        <h2 class="indigo-text">{{tournament.title}}</h2>
        <ul class="tournaments">
          <li v-for="(score,index) in tournamnet.scores" :key="index"></li>
          <span class="chip">{{score}}</span>
        </ul>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
     tournaments:[
       {title:'Muthaiga golf Tournament',slug: 'muthaiga-golf-tournament',scores:['Round 1', 'Round 2', 'Round 3'],id:'1'},
       {title:'Wilson Churchhill',slug: 'Wilson Churchhill',scores:['Round 1', 'Round 2', 'Round 3'],id:'2'},
       ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

这是路由器视图index.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ]
})

这是app.vue

<template>
  <div id="app">
   <navbar />
    <router-view/>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name: 'App',
  components:{
    navbar
  }
}
</script>

我们将不胜感激任何帮助。

Answer 1

将跨度放在v-for

内

<ul class="tournaments">
  <li v-for="(score,index) in tournament.scores" :key="index+'tournament'">
    <span class="chip">{{score}}</span>
  </li>
</ul>

此外，最好不要将索引用作键，我添加了字符串'tournament'以使其更具唯一性。

此外，请确保您已纠正“比赛”的拼写。

Link to official docs。

Answer 2

您在import tensorflow as tf (x_train, y_train), (x_test, y_test) = tf.keras.datasets.mnist.load_data() x_train = x_train.astype('float32')/255. x_test = x_test.astype('float32')/255. inter_dim = 64 # units in each dense layer latent_dim = 2 # latent space dimensionality # build encoder: image -> (mean, sigma) in latent space input = tf.keras.Input(shape=(28,28,),name="encoder_input") x = tf.keras.layers.Flatten()(input) x = tf.keras.layers.Dense(inter_dim, activation="relu")(x) z_mean = tf.keras.layers.Dense(latent_dim, name="z_mean")(x) z_log_sigma = tf.keras.layers.Dense(latent_dim, name="z_log_sigma")(x) # log(sigma) of latent dist encoder = tf.keras.Model(inputs=input, outputs=(z_mean,z_log_sigma),name="encoder") # create sampling layer using a keras Lambda def sampling(args): z1, z2 = args return z1 + tf.exp(0.5*z2) * tf.random.normal(shape=tf.shape(z1)) sampler = tf.keras.layers.Lambda(sampling) # # construct a decoder d_input = tf.keras.Input(shape=(latent_dim,),name="decoder_input") # dont need if connect straight to sample y = tf.keras.layers.Dense(inter_dim, activation="relu")(d_input) y = tf.keras.layers.Dense(784, activation="sigmoid")(y) output = tf.keras.layers.Reshape(target_shape=(28,28,))(y) # unflatten decoder = tf.keras.Model(inputs=d_input, outputs=output,name="decoder") # build the full vae model vae_input = tf.keras.Input(shape=(28,28,),name="vae_input") vae_output = decoder( sampler( encoder(vae_input) ) ) m = tf.keras.Model(inputs=vae_input,outputs=vae_output) #tf.keras.utils.plot_model(m, show_shapes=True, expand_nested=True) def vae_loss(y_true, y_pred): xent_loss = tf.keras.losses.BinaryCrossentropy()(y_true,y_pred) kl_loss = -0.5 * tf.reduce_mean( 1 + z_log_sigma - tf.square(z_mean) - tf.exp(z_log_sigma), axis=-1 ) return xent_loss + kl_loss m.compile(optimizer='adam',loss=vae_loss) m.fit(x_train, x_train, epochs=1)上有错字

比赛错了

如果您在控制台中查看，应该会看到

<li v-for="(score,index) in tournamnet.scores" :key="index"></li>

无法在VueJs中使用V-for渲染列表

2 个答案: