Question

现在尝试了8个小时才能使它正常工作，但仍然没有运气。最终，我想做的是打印一个循环，默认情况下显示所有项目。然后，当用户选中一个复选框时，它将过滤掉那些设置为false的项目。

我有以下一组复选框和一个循环：

  <div class="container" id="clubs">
    <div class="filter">
        <label><input type="checkbox" v-model="selectedCategory" value="All" /> All</label>
        <label><input type="checkbox" v-model="selectedCategory" value="ClubParking" /> Parking</label>
        <label><input type="checkbox" v-model="selectedCategory" value="ClubToilets" /> Toilets</label>
        <label><input type="checkbox" v-model="selectedCategory" value="ClubFloodlights" /> Floodlights</label>
    </div>

    <ul class="clubs-list">
        <li v-for="club in filteredClubs">{{ club.clubName }}</li>
    </ul>
</div>

然后在我的应用程序中，我有以下代码

var vm = new Vue({
    el:  "#clubs",
    data: {
        clubs: [
            { clubName: "Club One", clubParking: true, clubToilets: false, clubFloodlights: true },
            { clubName: "Club Two", clubParking: true, clubToilets: false, clubFloodlights: false },
            { clubName: "Club Three", clubParking: false, clubToilets: true, clubFloodlights: true },
        ],
        selectedCategory: "All"
    },
    computed: {
        filteredClubs: function() {
            var vm = this;
            var category = vm.selectedCategory;

            if(category === "All") {
                return vm.clubs;
            } else {

         return vm.clubs.filter(function(club) {
            return selectedFieldNames.every(fname=>club[fname])
             const selectedFieldNames =  selectedCategory.map(category=>{
                  switch(category){
                     case 'Toilets':
                      return 'clubToilets';
                     case 'Parking':
                      return 'clubParking';
                     case 'Floodlights':
                      return 'clubFloodlights';
                  }
            })

        });

            }
        }
    }
});

我什至已经使Codepen变得更好，因此我可以回溯看看我为什么做错了。任何帮助都值得欢迎，因为我整天都没有离开房子，试图让它正常工作。

Answer 1

按照上述评论中的说明编辑了代码笔。 1.从“ string” selectedCategory移到“ array” 2.更改了过滤条件以适用于数组

  Option Explicit

Private Sub CommandButton1_Click()

    Dim criteria As String, fldName As String, shtName As String
    Dim con As Object  ' ADODB.Connection
    Dim rcd As Object  ' ADODB.Recordset
    Dim colCount As Long

    ' Assuming the list has a header
    Set con = GetExcelConnection(ThisWorkbook.FullName, True)

    Set rcd = CreateObject("ADODB.Recordset")
    'Set rcd = New ADODB.Recordset

    ' Assuming the list is on the first sheet and
    shtName = ThisWorkbook.Sheets(1).Name

    ' Reading the list into a recordset
    With rcd
        .ActiveConnection = con
        .CursorType = 2  ' adOpenDynamic
        .LockType = 3    ' adLockOptimistic
        .Source = "SELECT * FROM [" & shtName & "$]"
        .Open
    End With

    colCount = rcd.Fields.Count + 1
    ' Move to the last record in the list
    rcd.MoveLast

    ' Trying to find the row where S.L.No. does contain avalue
    Do While IsNull(rcd.Fields(0).Value)
        rcd.MovePrevious
        If rcd.BOF Then
            MsgBox "No S.L.No found", vbOKOnly + vbCritical, "Error - Exit"
            Exit Sub
        End If
    Loop

    ' get the value and the fieldname for the filter
    criteria = rcd.Fields(0).Value
    fldName = rcd.Fields(0).Name


    ' Filter the list by the value in the first column and last row
    ' This assumes you do not have different areas with the same value
    rcd.Filter = fldName & " = '" & criteria & "'"

    ' Prpearing everything for the Userform
    Dim frm As New UserForm1
    Load frm
    With frm
        .ListBox1.ColumnCount = colCount
        .ListBox1.Column = rcd.GetRows   ' This transfers the filtered records into the lsitbox
        .Show
    End With

End Sub

Function GetExcelConnection(ByVal Path As String, _
    Optional ByVal Headers As Boolean = True) As Object
    Dim strConn As String
    Dim objConn As Object ' ADODB.Connection
    Set objConn = CreateObject("ADODB.Connection")
    strConn = "Provider=Microsoft.ACE.OLEDB.12.0;" & _
        "Data Source=" & Path & ";" & _
        "Extended Properties=""Excel 8.0;HDR=" & _
        IIf(Headers, "Yes", "No") & """"
    objConn.Open strConn
    Set GetExcelConnection = objConn
End Function

var vm = new Vue({
	el:  "#clubs",
	data: {
		clubs: [
			{ clubName: "Club One", clubParking: true, clubToilets: false, clubFloodlights: true },
			{ clubName: "Club Two", clubParking: true, clubToilets: false, clubFloodlights: false },
			{ clubName: "Club Three", clubParking: false, clubToilets: true, clubFloodlights: true },
		],
		selectedCategories: ["All"]
	},
	computed: {
		filteredClubs: function() {
			if (this.selectedCategories.includes('All')) {
				return this.clubs;
			} else {
        return this.clubs.filter(club => {
          return this.selectedCategories.some(category => club[category])
        })
			}
		}
	}
});

.container {
	padding: 20px;
	width: 90%;
	max-width: 400px;
	margin: 0 auto;
}

label {
	display: block;
	line-height: 1.5em;
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

li {
	padding: 8px 16px;
	border-bottom: 1px solid #eee;
}

为什么复选框过滤在VueJS中不起作用？

1 个答案: