小编OLA*_*OLA的帖子

我使用 vite 创建了一个新的 VUE 3 和 typescript 应用程序。后来我安装了primevue和primeflex。当我运行 npm run dev 时，出现以下错误：

我该如何解决？我的仓库，如果这能说明问题的话。

我为 Vue 安装了 Vite 构建工具，当我运行它时 ( npm run serve)，我收到一个错误，生成以下消息

“缺少脚本：“服务””。

经过一番研究后，我发现我的钥匙package.json不见了serve。

添加它（"serve": "vite preview"）并运行后，我在浏览器中收到以下错误

“不能获取 /”

我正在使用 Vue-chartjs 并创建了两个 vue 组件，每个组件用于条形图和折线图。我的数据源是SharePoint。我可以看到我的图表，但问题是图表没有响应。它们被放大并相互叠置。

我将道具从父级传递到每个组件（包括选项），但没有用。

这是我的 vue 实例代码和条形图组件的摘录

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    ChartConfig: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: '#3498db',
          borderColor: 'rgba(136,136,136,0.5)',
          label: "2013"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          categoryPercentage: 0.5,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          } …

我有一个表格，它是用每个单元格的只读输入框中的数据动态呈现的。在第一个单元格中，有一个编辑按钮。当用户单击“编辑”时，应禁用输入框上的只读，以便可以在每个单元格中输入数据。编辑按钮应隐藏，保存按钮应显示。当用户单击“保存”时，它应该调用一个可以使用数据的方法（保存到数据库或其他内容）。

我以为我可以使用该事件并深入到目标，但它是一个数组，我不知道该怎么做。有任何想法吗？

<div id="app">
<table border=1 width=100%>
  <tr>
    <td width=10px>EDIT</td>
    <td>Program</td>
    <td>Company</td>
    <td>Funding</td>
    <td>Funded</td>
    <td>Recruit</td>
  </tr>
  <tr v-for="program in programs">
    <td><button class="show" v-on:click="editItem($event)">edit</button>&nbsp;<button class="hide">save</button></td>    
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.program"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.company"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funding"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funded"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.Recruit"></td>
  </tr>
</table>
</div>

new Vue({
  el:"#app",
  data() {
    return {
      test:"hello",
      programs:"",
      hide:true
    }
  },
  created: function(){
    this.getPrograms();
  },
  mounted: function(){

  },
  methods: {
    getPrograms: function(){
     axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
        this.programs = …

我有一个使用对象数组生成的表。我很难弄清楚如何使用计算属性来过滤对象数组。我正在使用 VuE.js。我不确定如何在计算属性中正确使用 filter() 来过滤表。

new Vue({
  el:"#app",
  data: () => ({
    search:'',
    programs: [],
    editableKeys: ['date', 'company', 'funding', 'funded', 'recruit', 'program'],
  }),
  created () {
    this.getPrograms();
  },
  methods: {
    getPrograms() {
     axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then(response => {
       this.programs = response.data.map(program => ({
           ...program,
           isReadOnly: true,
            dropDowns: ["Apple","Google"]
       }));
      }).catch(error => {
       console.log(error);
      });
    },
    editItem (program) {
      program.isReadOnly = false
    },
    saveItem (program) {
      program.isReadOnly = true
      console.log(program)
      alert("New Value: "+program.company)
      alert("Previous Value: "+program.company)
    },
    bgColor (program) {
      return program.funded === program.funding ? …